/* ─────────────────────────────────────────────────────────────────
   PROJECT CRM — STYLE
   Dark glassmorphism design system matching MusicHub main site
───────────────────────────────────────────────────────────────── */

:root {
    --bg-0:         #050810;
    --bg-1:         #090e1c;
    --bg-2:         #111929;
    --text:         #eef3ff;
    --muted:        #b7c4df;
    --soft:         #7e90b8;
    --accent:       #a893ff;
    --accent-2:     #4fd7ff;
    --danger:       #ff5f7e;
    --success:      #3de8a0;
    --warn:         #f8c545;

    --glass:        rgba(255,255,255,0.07);
    --glass-mid:    rgba(255,255,255,0.11);
    --glass-high:   rgba(255,255,255,0.17);
    --stroke:       rgba(255,255,255,0.18);
    --stroke-soft:  rgba(255,255,255,0.1);

    --col-min-w:    290px;
    --col-max-w:    320px;
    --header-h:     58px;

    --shadow-sm:    0 4px 16px rgba(3,8,22,0.35);
    --shadow-md:    0 12px 40px rgba(3,8,22,0.52);
    --shadow-lg:    0 28px 72px rgba(3,8,22,0.7);

    --radius-sm:    0.65rem;
    --radius-md:    1rem;
    --radius-lg:    1.4rem;

    --ease:         cubic-bezier(0.38, 0.005, 0.215, 1);
    --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── RESET ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
    font-size: 16px;
    max-width: 100%;
    overflow-x: hidden;
    background: var(--bg-0);
}
/* Ensure the HTML hidden attribute always wins over any display rule */
[hidden] { display: none !important; }
body {
    margin: 0;
    min-height: 100vh;
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
    isolation: isolate;
    font-family: Inter, "SF Pro Text", system-ui, -apple-system, sans-serif;
    color: var(--text);
    background:
        radial-gradient(900px 480px at 6% -14%, rgba(168,147,255,0.22), transparent 58%),
        radial-gradient(700px 380px at 92% -8%, rgba(79,215,255,0.18), transparent 58%),
        linear-gradient(165deg, var(--bg-0), var(--bg-1) 45%, var(--bg-2));
}
button, input, select, textarea {
    font: inherit;
    color: inherit;
}
p, h1, h2, h3, h4 { margin: 0; }

/* ─── AMBIENT ────────────────────────────────────────────────── */
.ambient {
    position: fixed;
    border-radius: 50%;
    filter: blur(24px);
    pointer-events: none;
    z-index: -1;
    animation: ambientDrift 20s ease-in-out infinite alternate;
}
.ambient-one {
    width: 32rem; height: 32rem;
    top: -12rem; left: -10rem;
    background: radial-gradient(circle, rgba(168,147,255,0.35), rgba(168,147,255,0.03));
}
.ambient-two {
    width: 28rem; height: 28rem;
    right: -8rem; bottom: 4rem;
    background: radial-gradient(circle, rgba(79,215,255,0.28), rgba(79,215,255,0.03));
    animation-duration: 24s;
    animation-direction: alternate-reverse;
}
@keyframes ambientDrift {
    to { transform: translate(42px, -28px) scale(1.06); }
}

/* ─── HEADER ─────────────────────────────────────────────────── */
.site-header {
    position: relative;
    top: 0;
    z-index: 210;
    padding-top: 0.8rem;
}

.site-header .container {
    width: min(1240px, 92%);
    margin-inline: auto;
}

.site-header .glass-nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.76rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--stroke);
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.03));
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.site-header .glass-nav::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background: linear-gradient(118deg, rgba(255, 255, 255, 0.22), transparent 35%, transparent 70%, rgba(255, 255, 255, 0.12));
    opacity: 0.38;
    pointer-events: none;
}

.site-header .brand {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--text);
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.site-header .brand-mark {
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 0 0 6px rgba(168, 147, 255, 0.18);
}

.site-header .nav-links {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.42rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-header .nav-links a {
    display: inline-block;
    color: var(--text);
    text-decoration: none;
    font-size: 0.92rem;
    padding: 0.5rem 0.88rem;
    border-radius: 999px;
    border: 1px solid transparent;
    transition: transform 0.24s ease, background 0.24s ease, border-color 0.24s ease;
}

.site-header .nav-links a:hover,
.site-header .nav-links a:focus-visible {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.35);
}

.site-header .nav-links a.active {
    background: rgba(79, 215, 255, 0.18);
    border-color: rgba(79, 215, 255, 0.48);
}

.crm-header {
    position: relative;
    top: 0;
    width: 100%;
    z-index: 200;
    background: linear-gradient(180deg, rgba(5,8,16,0.92) 80%, transparent);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid var(--stroke-soft);
}
.header-inner {
    display: grid;
    grid-template-columns: auto minmax(220px, 1fr) auto;
    align-items: center;
    gap: 0.9rem;
    padding: 0.62rem 1.2rem;
    min-height: var(--header-h);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}
.back-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid var(--stroke);
    background: var(--glass);
    color: var(--text);
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s, transform 0.2s var(--ease-out);
}
.back-link:hover {
    background: var(--glass-mid);
    border-color: rgba(255,255,255,0.34);
    transform: translateX(-3px);
}
.logo-group {
    display: flex;
    align-items: center;
    gap: 0.48rem;
    font-size: 0.9rem;
}
.brand-mark {
    width: 0.52rem; height: 0.52rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 0 0 5px rgba(168,147,255,0.16);
    flex-shrink: 0;
}
.brand-name { font-weight: 700; }
.brand-sep  { color: var(--soft); }
.page-title { color: var(--muted); }

.header-center {
    width: 100%;
    max-width: 460px;
    justify-self: center;
}
.search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.search-icon {
    position: absolute;
    left: 0.72rem;
    color: var(--soft);
    pointer-events: none;
}
.search-input {
    width: 100%;
    padding: 0.52rem 2.4rem 0.52rem 2.2rem;
    border-radius: 999px;
    border: 1px solid var(--stroke);
    background: var(--glass);
    color: var(--text);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
}
.search-input::placeholder { color: var(--soft); }
.search-input:focus {
    border-color: rgba(168,147,255,0.55);
    background: var(--glass-mid);
}
.search-clear {
    position: absolute;
    right: 0.68rem;
    background: none;
    border: none;
    color: var(--soft);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}
.search-clear.visible { opacity: 1; pointer-events: auto; }

.header-right {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
    justify-self: end;
}

/* ─── FILTER BAR ─────────────────────────────────────────────── */
.filter-bar {
    border-top: 1px solid var(--stroke-soft);
    padding: 0.6rem 1.2rem;
}
.filter-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.filter-group {
    display: flex;
    align-items: center;
    gap: 0.44rem;
    font-size: 0.82rem;
    color: var(--soft);
    cursor: pointer;
}
.filter-select,
.filter-input {
    padding: 0.36rem 0.62rem;
    border-radius: 0.56rem;
    border: 1px solid var(--stroke);
    background: var(--glass);
    color: var(--text);
    font-size: 0.84rem;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s;
}
.filter-select:focus,
.filter-input:focus { border-color: rgba(168,147,255,0.55); }

/* ─── BUTTONS ────────────────────────────────────────────────── */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.44rem;
    padding: 0.52rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(168,147,255,0.5);
    background: linear-gradient(130deg, rgba(168,147,255,0.28), rgba(79,215,255,0.18));
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.22s var(--ease-out), box-shadow 0.22s, background 0.22s;
    box-shadow: 0 2px 14px rgba(168,147,255,0.22);
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(168,147,255,0.38);
    background: linear-gradient(130deg, rgba(168,147,255,0.38), rgba(79,215,255,0.26));
}
.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.44rem;
    padding: 0.52rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--stroke);
    background: var(--glass);
    color: var(--muted);
    font-size: 0.88rem;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}
.btn-ghost:hover {
    background: var(--glass-mid);
    border-color: rgba(255,255,255,0.34);
    color: var(--text);
    transform: translateY(-1px);
}
.btn-small {
    padding: 0.36rem 0.72rem;
    font-size: 0.8rem;
}
.btn-danger {
    display: inline-flex; align-items: center; gap: 0.44rem;
    padding: 0.52rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(255,95,126,0.5);
    background: rgba(255,95,126,0.16);
    color: var(--danger);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
}
.btn-danger:hover {
    background: rgba(255,95,126,0.28);
    transform: translateY(-1px);
}
.btn-icon-danger {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255,95,126,0.3);
    background: rgba(255,95,126,0.1);
    color: var(--danger);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}
.btn-icon-danger:hover { background: rgba(255,95,126,0.24); transform: scale(1.08); }
.btn-upload {
    display: inline-flex; align-items: center; gap: 0.38rem;
    padding: 0.34rem 0.72rem;
    border-radius: 0.56rem;
    border: 1px solid var(--stroke);
    background: var(--glass);
    color: var(--muted);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.btn-upload:hover { background: var(--glass-mid); color: var(--text); }
.btn-add-field {
    padding: 0.32rem 0.7rem;
    border-radius: 0.52rem;
    border: 1px dashed rgba(168,147,255,0.45);
    background: rgba(168,147,255,0.08);
    color: var(--accent);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}
.btn-add-field:hover { background: rgba(168,147,255,0.16); }

/* ─── BOARD ──────────────────────────────────────────────────── */
.board-scroll {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.3rem 1.2rem 2.4rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    min-height: calc(100vh - var(--header-h));
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.12) transparent;
}
.board-scroll::-webkit-scrollbar { height: 6px; }
.board-scroll::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.12);
    border-radius: 999px;
}
.board {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-shrink: 0;
}

.add-col-ghost {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 200px;
    min-height: 160px;
    border-radius: var(--radius-md);
    border: 1.5px dashed rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.03);
    color: var(--soft);
    font-size: 0.88rem;
    cursor: pointer;
    transition: border-color 0.24s, color 0.24s, background 0.24s;
    align-self: center;
}
.add-col-ghost:hover {
    border-color: rgba(168,147,255,0.5);
    color: var(--accent);
    background: rgba(168,147,255,0.06);
}

/* ─── COLUMN ─────────────────────────────────────────────────── */
.column {
    flex-shrink: 0;
    width: var(--col-min-w);
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-md);
    border: 1px solid var(--stroke-soft);
    background: linear-gradient(160deg, rgba(255,255,255,0.09), rgba(255,255,255,0.04));
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    box-shadow: var(--shadow-sm);
    transition: border-color 0.2s;
    animation: colEnter 0.36s var(--ease-out) both;
}
.column.drag-over {
    border-color: rgba(168,147,255,0.65);
    box-shadow: 0 0 0 2px rgba(168,147,255,0.25), var(--shadow-md);
}
@keyframes colEnter {
    from { opacity: 0; transform: translateY(18px) scale(0.97); }
    to   { opacity: 1; transform: none; }
}

.col-header {
    display: flex;
    align-items: center;
    gap: 0.56rem;
    padding: 0.86rem 0.86rem 0.6rem;
    cursor: default;
}
.col-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.col-name {
    flex: 1;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.col-count {
    font-size: 0.76rem;
    color: var(--soft);
    background: rgba(255,255,255,0.09);
    border-radius: 999px;
    padding: 0.14rem 0.52rem;
}
.col-menu-btn {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    border: none;
    background: none;
    color: var(--soft);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.18s, background 0.18s;
    font-size: 1.2rem;
    line-height: 1;
}
.col-header:hover .col-menu-btn { opacity: 1; }
.col-menu-btn:hover { background: var(--glass); color: var(--text); }

.col-menu {
    position: absolute;
    right: 0; top: calc(100% + 4px);
    min-width: 160px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--stroke);
    background: rgba(12,18,34,0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-md);
    z-index: 300;
    overflow: hidden;
    animation: menuDrop 0.2s var(--ease-out) both;
}
@keyframes menuDrop {
    from { opacity: 0; transform: translateY(-8px) scale(0.96); }
    to   { opacity: 1; transform: none; }
}
.col-menu-item {
    display: flex; align-items: center; gap: 0.6rem;
    width: 100%;
    padding: 0.64rem 0.96rem;
    border: none;
    background: none;
    color: var(--muted);
    font-size: 0.88rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.col-menu-item:hover { background: var(--glass); color: var(--text); }
.col-menu-item.danger { color: var(--danger); }
.col-menu-item.danger:hover { background: rgba(255,95,126,0.12); }

.cards-zone {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0 0.66rem;
    min-height: 60px;
    overflow-y: auto;
    max-height: calc(100vh - 300px);
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.cards-zone::-webkit-scrollbar { width: 4px; }
.cards-zone::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
    border-radius: 999px;
}
.empty-zone-hint {
    padding: 1.2rem 0.6rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--soft);
    border: 1.5px dashed rgba(255,255,255,0.1);
    border-radius: var(--radius-sm);
    pointer-events: none;
}
.drop-indicator {
    height: 3px;
    border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 10px rgba(168,147,255,0.7);
    margin: 0;
    pointer-events: none;
    animation: indFade 0.18s ease both;
}
@keyframes indFade { from { opacity: 0; } to { opacity: 1; } }

.col-add-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.52rem 0.66rem 0.8rem;
    padding: 0.52rem 0.66rem;
    border-radius: var(--radius-sm);
    border: 1.5px dashed rgba(255,255,255,0.13);
    background: none;
    color: var(--soft);
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.col-add-btn:hover {
    border-color: rgba(168,147,255,0.48);
    color: var(--accent);
    background: rgba(168,147,255,0.06);
}

/* ─── CARD ───────────────────────────────────────────────────── */
.card {
    position: relative;
    border-radius: var(--radius-sm);
    border: 1px solid var(--stroke-soft);
    background: linear-gradient(145deg, rgba(255,255,255,0.11), rgba(255,255,255,0.05));
    overflow: hidden;
    padding: 0.76rem 0.8rem;
    cursor: grab;
    user-select: none;
    transition: transform 0.22s var(--ease-out), box-shadow 0.22s, border-color 0.22s, opacity 0.22s;
    animation: cardEnter 0.3s var(--ease-out) both;
}
.card:active { cursor: grabbing; }
.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(3,8,22,0.44);
    border-color: rgba(255,255,255,0.28);
}
.card.dragging {
    opacity: 0.38;
    transform: scale(0.97);
    pointer-events: none;
}
@keyframes cardEnter {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.card-accent-bar {
    position: absolute;
    top: 1px;
    bottom: 1px;
    left: 0px;
    width: 4px;
    border-radius: calc(var(--radius-sm) - 1px) 0 0 calc(var(--radius-sm) - 1px);
    pointer-events: none;
}
.card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    padding-left: 0.72rem;
}
.card-title {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text);
    flex: 1;
}
.card-desc {
    margin-top: 0.42rem;
    padding-left: 0.72rem;
    font-size: 0.82rem;
    color: var(--muted);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}
.priority-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
}
.p-none    { background: var(--soft); }
.p-low     { background: var(--success); }
.p-medium  { background: var(--warn); }
.p-high    { background: #ff9a3c; }
.p-urgent  { background: var(--danger); box-shadow: 0 0 0 4px rgba(255,95,126,0.2); }

.card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.64rem;
    padding-left: 0.72rem;
}
.card-tag {
    padding: 0.16rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    background: rgba(255,255,255,0.09);
    border: 1px solid rgba(255,255,255,0.15);
    color: var(--muted);
}
.card-due {
    font-size: 0.74rem;
    color: var(--soft);
    display: flex; align-items: center; gap: 0.28rem;
}
.card-due.overdue { color: var(--danger); }
.card-due.today   { color: var(--warn); }
.card-due svg { opacity: 0.8; }
.card-clip {
    font-size: 0.74rem;
    color: var(--soft);
    display: flex; align-items: center; gap: 0.2rem;
}
.card-assignee {
    margin-left: auto;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    display: flex; align-items: center; justify-content: center;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--bg-0);
    flex-shrink: 0;
    overflow: hidden;
}

/* ─── GLASS MODAL BASE ───────────────────────────────────────── */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(3,8,20,0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.2rem;
    animation: backdropIn 0.22s ease both;
}
@keyframes backdropIn { from { opacity: 0; } to { opacity: 1; } }

.glass-modal {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255,255,255,0.22);
    background: linear-gradient(145deg, rgba(255,255,255,0.16) 0%, rgba(10,16,30,0.9) 30%);
    backdrop-filter: blur(32px) saturate(160%);
    -webkit-backdrop-filter: blur(32px) saturate(160%);
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.2);
    animation: modalIn 0.3s var(--ease-out) both;
    overflow: hidden;
    max-height: calc(100dvh - 2.4rem);
}
.glass-modal::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(145deg, rgba(255,255,255,0.24), rgba(255,255,255,0) 40%);
    opacity: 0.18;
    pointer-events: none;
}
@keyframes modalIn {
    from { opacity: 0; transform: translateY(24px) scale(0.96); }
    to   { opacity: 1; transform: none; }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.2rem 0.7rem;
    border-bottom: 1px solid var(--stroke-soft);
}
.modal-header-actions { display: flex; align-items: center; gap: 0.5rem; }
.modal-title { font-size: 1.05rem; font-weight: 700; }
.modal-close {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border-radius: 50%; border: none;
    background: var(--glass);
    color: var(--muted);
    font-size: 1.2rem;
    font-family: monospace;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
}
.modal-close:hover { background: var(--glass-mid); color: var(--text); }

.modal-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 1rem 1.2rem;
    overflow-y: auto;
}
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 0.8rem 1.2rem;
    border-top: 1px solid var(--stroke-soft);
}

/* ─── COLUMN MODAL ───────────────────────────────────────────── */
.col-modal { width: min(420px, 96vw); }

.color-row {
    display: flex;
    align-items: center;
    gap: 0.52rem;
    flex-wrap: wrap;
    margin-top: 0.4rem;
}
.color-swatch {
    width: 26px; height: 26px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.18s, border-color 0.18s;
}
.color-swatch:hover  { transform: scale(1.14); }
.color-swatch.active { border-color: white; transform: scale(1.18); }

/* ─── CARD MODAL ─────────────────────────────────────────────── */
.card-modal {
    width: min(900px, 96vw);
    display: flex;
    flex-direction: column;
}
.two-col {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 1.2rem;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
.modal-main {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.4rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.modal-main::-webkit-scrollbar { width: 4px; }
.modal-main::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 999px; }

/* ─── FORM ELEMENTS ──────────────────────────────────────────── */
.field-label {
    display: flex; flex-direction: column; gap: 0.36rem;
    font-size: 0.8rem; color: var(--soft); font-weight: 500;
    cursor: default;
}
.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
}
.modal-input,
.modal-textarea {
    padding: 0.58rem 0.78rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--stroke);
    background: rgba(255,255,255,0.06);
    color: var(--text);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
}
.modal-input::placeholder,
.modal-textarea::placeholder { color: var(--soft); }
.modal-input:focus,
.modal-textarea:focus {
    border-color: rgba(168,147,255,0.55);
    background: rgba(168,147,255,0.06);
}
.modal-textarea { resize: vertical; line-height: 1.5; }
.modal-input[type="date"] { color-scheme: dark; appearance: none; }

/* ─── CUSTOM FIELDS ──────────────────────────────────────────── */
.custom-fields-section,
.attachments-section {
    border-top: 1px solid var(--stroke-soft);
    padding-top: 0.8rem;
}
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.7rem;
}
.section-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--soft);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}
.add-field-row { display: flex; align-items: center; gap: 0.5rem; }
.mini-select {
    padding: 0.3rem 0.58rem;
    border-radius: 0.52rem;
    border: 1px solid var(--stroke);
    background: var(--glass);
    color: var(--text);
    font-size: 0.8rem;
    outline: none;
    cursor: pointer;
}

.custom-fields-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.custom-field-item {
    display: grid;
    grid-template-columns: 130px 1fr auto;
    gap: 0.5rem;
    align-items: start;
    animation: fieldSlide 0.22s var(--ease-out) both;
}
@keyframes fieldSlide {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: none; }
}
.field-name-input {
    padding: 0.52rem 0.68rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--stroke);
    background: rgba(255,255,255,0.06);
    color: var(--text);
    font-size: 0.82rem;
    outline: none;
}
.field-name-input:focus { border-color: rgba(168,147,255,0.55); }
.field-remove-btn {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; margin-top: 3px;
    border-radius: 50%; border: 1px solid rgba(255,95,126,0.28);
    background: rgba(255,95,126,0.07);
    color: var(--danger);
    cursor: pointer; font-size: 1rem;
    transition: background 0.18s;
}
.field-remove-btn:hover { background: rgba(255,95,126,0.2); }

/* checklist items */
.checklist-wrap { display: flex; flex-direction: column; gap: 0.38rem; }
.checklist-item { display: flex; align-items: center; gap: 0.5rem; }
.checklist-cb { accent-color: var(--accent); width: 15px; height: 15px; }
.checklist-item input[type="text"] {
    flex: 1;
    padding: 0.44rem 0.64rem;
    border-radius: 0.52rem;
    border: 1px solid var(--stroke);
    background: rgba(255,255,255,0.06);
    color: var(--text);
    font-size: 0.84rem; outline: none;
}
.add-check-btn {
    align-self: flex-start;
    padding: 0.3rem 0.6rem;
    border-radius: 0.52rem;
    border: 1px dashed rgba(168,147,255,0.4);
    background: none; color: var(--accent);
    font-size: 0.78rem; cursor: pointer;
    transition: background 0.18s;
}
.add-check-btn:hover { background: rgba(168,147,255,0.1); }

/* star rating */
.rating-wrap { display: flex; gap: 0.28rem; }
.star-btn {
    background: none; border: none; cursor: pointer;
    font-size: 1.3rem; color: var(--soft);
    transition: color 0.14s, transform 0.14s;
}
.star-btn:hover, .star-btn.active { color: var(--warn); transform: scale(1.14); }

/* dropdown options builder */
.dropdown-options { display: flex; flex-direction: column; gap: 0.3rem; }
.dropdown-options input[type="text"] {
    padding: 0.44rem 0.64rem;
    border-radius: 0.52rem;
    border: 1px solid var(--stroke);
    background: rgba(255,255,255,0.06);
    color: var(--text);
    font-size: 0.84rem; outline: none;
}

/* ─── ATTACHMENTS ────────────────────────────────────────────── */
.attachments-list { display: flex; flex-direction: column; gap: 0.5rem; }

.attachment-item {
    display: flex;
    align-items: center;
    gap: 0.66rem;
    padding: 0.62rem 0.7rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--stroke-soft);
    background: rgba(255,255,255,0.05);
    animation: fieldSlide 0.22s var(--ease-out) both;
}
.attach-icon {
    width: 34px; height: 34px;
    border-radius: 0.56rem;
    display: flex; align-items: center; justify-content: center;
    background: var(--glass-mid);
    font-size: 1.1rem;
    flex-shrink: 0;
}
.attach-name {
    flex: 1; font-size: 0.84rem; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.attach-size { font-size: 0.76rem; color: var(--soft); flex-shrink: 0; }
.attach-remove {
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    border: none; background: none; color: var(--soft);
    cursor: pointer; font-size: 1rem;
    transition: color 0.18s, background 0.18s;
}
.attach-remove:hover { color: var(--danger); background: rgba(255,95,126,0.1); }

.audio-player {
    width: 100%; margin-top: 0.4rem;
    border-radius: 0.52rem; overflow: hidden;
}
.audio-player audio {
    width: 100%;
    height: 36px;
    outline: none;
}
audio::-webkit-media-controls-panel {
    background: rgba(20,28,50,0.9);
    border-radius: 0.52rem;
}

/* ─── MODAL SIDEBAR ──────────────────────────────────────────── */
.modal-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    min-height: 0;
    border-left: 1px solid var(--stroke-soft);
    padding-left: 1rem;
    overflow-y: auto;
    scrollbar-width: thin;
}
.sidebar-meta { display: flex; flex-direction: column; gap: 0.42rem; }
.meta-row {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 0.8rem;
}
.meta-label  { color: var(--soft); }
.meta-value  { color: var(--text); font-weight: 500; }

.sidebar-section { display: flex; flex-direction: column; gap: 0.6rem; }
.sidebar-label {
    font-size: 0.78rem; font-weight: 600;
    color: var(--soft); text-transform: uppercase; letter-spacing: 0.07em;
}
.activity-log {
    display: flex; flex-direction: column; gap: 0.5rem;
    max-height: 220px; overflow-y: auto;
    scrollbar-width: thin;
}
.activity-entry {
    padding: 0.52rem 0.68rem;
    border-radius: 0.64rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--stroke-soft);
    font-size: 0.82rem; line-height: 1.4;
}
.activity-entry .entry-time {
    font-size: 0.72rem; color: var(--soft); margin-top: 0.26rem;
}
.activity-input-wrap {
    display: flex; flex-direction: column; gap: 0.4rem;
}
.activity-input {
    width: 100%;
    padding: 0.52rem 0.68rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--stroke);
    background: rgba(255,255,255,0.06);
    color: var(--text); font-size: 0.84rem;
    resize: none; outline: none;
    transition: border-color 0.2s;
}
.activity-input:focus { border-color: rgba(168,147,255,0.55); }

/* ─── CONFIRM MODAL ──────────────────────────────────────────── */
.confirm-modal { width: min(360px, 92vw); }
.confirm-msg { font-size: 0.95rem; color: var(--muted); padding: 0.4rem 0; }

/* ─── TOAST ──────────────────────────────────────────────────── */
.toast-container {
    position: fixed;
    bottom: 1.4rem;
    right: 1.4rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}
.toast {
    padding: 0.68rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--stroke);
    background: rgba(12,18,34,0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--shadow-md);
    font-size: 0.86rem;
    color: var(--text);
    animation: toastIn 0.3s var(--ease-out) both;
    max-width: 300px;
}
.toast.success { border-color: rgba(61,232,160,0.4); color: var(--success); }
.toast.error   { border-color: rgba(255,95,126,0.4); color: var(--danger); }
.toast.leaving { animation: toastOut 0.3s ease forwards; }
@keyframes toastIn  { from { opacity:0;transform:translateY(12px) scale(.95); } to { opacity:1;transform:none; } }
@keyframes toastOut { to   { opacity:0;transform:translateY(-6px) scale(.96); } }

/* ─── DRAG GHOST ─────────────────────────────────────────────── */
.drag-ghost {
    position: fixed;
    pointer-events: none;
    z-index: 9000;
    width: var(--col-min-w);
    transform: rotate(2.5deg) scale(1.03);
    opacity: 0.88;
    box-shadow: 0 24px 56px rgba(3,8,22,0.72), 0 0 0 1px rgba(168,147,255,0.35);
    border-radius: var(--radius-sm);
    transition: none;
}

/* ─── SEARCH HIGHLIGHT ───────────────────────────────────────── */
.card.hidden { display: none; }
mark {
    background: rgba(168,147,255,0.35);
    color: var(--text);
    border-radius: 2px;
    padding: 0 1px;
}

/* ─── SCROLLBAR GLOBAL ───────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 999px; }

/* ─── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 980px) {
    .site-header .glass-nav {
        flex-wrap: wrap;
        border-radius: 1.2rem;
        gap: 0.7rem;
    }

    .site-header .brand {
        width: 100%;
        justify-content: center;
    }

    .site-header .nav-links {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    .header-inner {
        grid-template-columns: 1fr auto;
        row-gap: 0.62rem;
    }

    .header-left {
        min-width: 0;
    }

    .logo-group {
        min-width: 0;
    }

    .page-title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 190px;
    }

    .header-center {
        grid-column: 1 / -1;
        max-width: none;
    }
}

@media (max-width: 860px) {
    .board-scroll {
        padding: 1rem 0.9rem 1.8rem;
    }

    .column {
        width: min(82vw, 300px);
    }

    .add-col-ghost {
        width: min(68vw, 210px);
    }
}

@media (max-width: 700px) {
    .site-header .container {
        width: min(1240px, 94%);
    }

    .site-header .nav-links a {
        font-size: 0.84rem;
        padding: 0.44rem 0.68rem;
    }

    .header-inner {
        padding: 0.54rem 0.86rem;
        gap: 0.62rem;
    }

    .header-center {
        display: block;
    }

    .logo-group {
        font-size: 0.84rem;
    }

    .page-title {
        max-width: 130px;
    }

    .header-right {
        gap: 0.42rem;
    }

    .header-right .btn-ghost,
    .header-right .btn-primary {
        padding: 0.46rem 0.68rem;
        font-size: 0.8rem;
    }

    .header-right .btn-primary {
        box-shadow: none;
    }

    .search-input {
        font-size: 0.84rem;
        padding: 0.48rem 2.2rem 0.48rem 2.05rem;
    }

    .two-col { grid-template-columns: 1fr; }
    .modal-sidebar { border-left: none; border-top: 1px solid var(--stroke-soft); padding-left: 0; padding-top: 1rem; }
    .card-modal { width: 96vw; }
}

@media (max-width: 520px) {
    .board-scroll {
        padding: 0.9rem 0.72rem 1.5rem;
    }

    .column {
        width: min(86vw, 320px);
    }

    .add-col-ghost {
        width: min(74vw, 200px);
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}