:root{
    --bg:#070a10;
    --panel:#10141d;
    --panel2:#151a25;
    --line:#283040;
    --text:#f6f7fb;
    --muted:#9aa6bf;
    --purple:#7b5cff;
    --purple2:#a373ff;
    --green:#2fd4b0;
    --red:#ff6b78;
    --yellow:#ffcc66;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    scroll-padding-top:105px;
}

body{
    margin:0;
    background:
        radial-gradient(
            circle at 80% -20%,
            #25133c 0,
            transparent 35%
        ),
        var(--bg);
    color:var(--text);
    font-family:Inter,"Segoe UI",Arial,sans-serif;
    line-height:1.5;
}

body.modal-open{
    overflow:hidden;
}

/* =========================================================
   TOPBAR
   ========================================================= */

.topbar{
    position:fixed;
    inset:0 0 auto;
    z-index:50;

    height:82px;

    display:flex;
    align-items:center;
    gap:36px;

    padding:
        0
        max(
            24px,
            calc((100vw - 1280px) / 2)
        );

    border-bottom:1px solid var(--line);

    background:rgba(7,10,16,.92);
    backdrop-filter:blur(18px);
}

.brand{
    min-width:230px;

    display:flex;
    align-items:center;
    gap:12px;

    color:var(--text);
    text-decoration:none;
}

.brand-mark{
    width:44px;
    height:44px;

    display:grid;
    place-items:center;

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            var(--purple),
            var(--purple2)
        );

    font-weight:800;
}

.brand-mark.large{
    width:72px;
    height:72px;
    margin:auto;
    font-size:24px;
}

.brand strong,
.brand small{
    display:block;
}

.brand small{
    color:var(--muted);
    font-size:12px;
}

.topnav{
    flex:1;

    display:flex;
    gap:8px;
}

.topnav a{
    padding:12px 16px;

    border-radius:10px;

    color:var(--muted);
    text-decoration:none;
    font-weight:650;
}

.topnav a:hover{
    color:#fff;
    background:var(--panel2);
}

.topnav a.active{
    color:#fff;

    background:
        linear-gradient(
            135deg,
            var(--purple),
            #8e62ff
        );

    box-shadow:
        0 8px 24px
        rgba(123,92,255,.22);
}

.project-status{
    display:flex;
    align-items:center;
    gap:8px;

    color:var(--muted);
    text-transform:capitalize;
}

.project-status span{
    width:9px;
    height:9px;

    border-radius:50%;

    background:var(--green);

    box-shadow:
        0 0 12px
        var(--green);
}

/* =========================================================
   GENERAL
   ========================================================= */

.page-shell{
    max-width:1280px;
    margin:0 auto;
    padding:122px 24px 70px;
}

.hero{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:30px;

    margin-bottom:28px;
}

.eyebrow,
.section-heading small{
    color:#9cb0df;
    font-size:11px;
    font-weight:800;
    letter-spacing:.18em;
}

.hero h1{
    margin:6px 0 8px;
    font-size:clamp(32px,4vw,56px);
}

.hero p{
    max-width:780px;

    color:var(--muted);
    font-size:18px;
}

.hero-meta{
    padding:16px 20px;

    border:1px solid var(--line);
    border-radius:16px;

    background:var(--panel);
}

.hero-meta span,
.hero-meta strong{
    display:block;
}

.hero-meta span{
    color:var(--muted);
    font-size:12px;
}

.section-card{
    margin:24px 0;
    padding:30px;

    border:1px solid var(--line);
    border-radius:22px;

    background:rgba(16,20,29,.94);

    box-shadow:
        0 20px 60px
        rgba(0,0,0,.18);
}

.section-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    margin-bottom:26px;
}

.section-heading > div{
    display:flex;
    align-items:center;
    gap:16px;
}

.section-heading h2{
    margin:1px 0;
    font-size:28px;
}

.step-number{
    width:48px;
    height:48px;

    display:grid;
    place-items:center;

    border-radius:14px;

    background:#241d4e;
    color:#9c8aff;

    font-weight:800;
}

.pill{
    padding:7px 12px;

    border:1px solid var(--line);
    border-radius:999px;

    color:var(--muted);
    font-size:12px;
}

.pill.success{
    color:var(--green);
    border-color:#23584f;
}

.pill.warning{
    color:var(--yellow);
    border-color:#66532b;
}

.pill.danger{
    color:var(--red);
    border-color:#6a2d36;
}

/* =========================================================
   FORMS
   ========================================================= */

.form-grid{
    display:grid;
    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:18px 20px;
}

.form-grid label,
.reference-card label{
    font-size:13px;
    font-weight:700;
}

.form-grid input,
.form-grid select,
.form-grid textarea,
.reference-card textarea,
.comment-form input,
.comment-form textarea{
    width:100%;
    margin-top:8px;
    padding:14px 15px;

    border:1px solid var(--line);
    border-radius:12px;

    background:#0d1119;
    color:var(--text);

    font:inherit;
    outline:none;
}

.form-grid input:focus,
.form-grid textarea:focus,
.form-grid select:focus,
.comment-form input:focus,
.comment-form textarea:focus{
    border-color:var(--purple);
}

.full{
    grid-column:1 / -1;
}

.form-block{
    padding-top:10px;
    border-top:1px solid var(--line);
}

.form-block:first-of-type{
    border-top:0;
}

.form-block h3{
    margin:0;
}

.form-block p,
label small{
    color:var(--muted);
    font-weight:400;
}

.form-actions{
    display:flex;
    justify-content:flex-end;

    margin-top:4px;
}

.btn-primary,
.btn-secondary{
    padding:13px 18px;

    border:0;
    border-radius:12px;

    font-weight:800;
    cursor:pointer;
}

.btn-primary{
    background:
        linear-gradient(
            135deg,
            var(--purple),
            #8e62ff
        );

    color:#fff;
}

.btn-secondary{
    border:1px solid #343d50;

    background:#202635;
    color:#fff;
}

.notice{
    margin:0 0 20px;
    padding:14px 16px;

    border:1px solid #304466;
    border-radius:12px;

    background:#101a2a;
    color:#c3d3f5;
}

.notice.warning{
    border-color:#67552c;
    background:#211d13;
    color:#ffe3a1;
}

.notice.danger{
    border-color:#66313a;
    background:#211217;
    color:#ffbac1;
}

.locked-panel{
    display:flex;
    align-items:center;
    gap:18px;

    padding:20px;

    border:1px solid var(--line);
    border-radius:16px;

    background:#0d1119;
}

.locked-panel .lock-icon{
    width:46px;
    height:46px;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:#15352e;
    color:var(--green);

    font-size:22px;
}

.locked-panel h3,
.locked-panel p{
    margin:0;
}

.locked-panel p{
    color:var(--muted);
}

.locked-panel button{
    margin-left:auto;
}

/* =========================================================
   ORIGINAL REFERENCES SUPPORT
   ========================================================= */

.upload-box{
    display:flex;
    align-items:center;
    gap:16px;

    margin-bottom:24px;
}

.dropzone{
    flex:1;

    min-height:130px;

    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;

    border:1px dashed #48526b;
    border-radius:16px;

    background:#0d1119;

    cursor:pointer;
}

.dropzone input{
    display:none;
}

.dropzone span{
    color:var(--purple2);
    font-size:28px;
}

.dropzone small{
    color:var(--muted);
}

.reference-grid{
    display:grid;
    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:18px;
}

.reference-card{
    position:relative;

    padding:12px;

    border:1px solid var(--line);
    border-radius:16px;

    background:#0d1119;
}

.reference-card.dragging{
    opacity:.45;
}

.reference-card img{
    width:100%;
    height:190px;

    border-radius:11px;

    object-fit:cover;
    background:#06080d;
}

.reference-number{
    position:absolute;
    top:20px;
    left:20px;

    width:30px;
    height:30px;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:var(--purple);

    font-weight:800;
}

.delete-check{
    display:flex;
    align-items:center;
    gap:8px;

    margin-top:10px;

    color:#ff9aa4;
}

.delete-check input{
    width:auto;
}

.drag-hint{
    color:var(--muted);
    font-size:11px;
}

/* =========================================================
   TIMELINE BASE
   ========================================================= */

.empty-state,
.preview-placeholder{
    padding:34px;

    border:1px dashed var(--line);
    border-radius:16px;

    color:var(--muted);
    text-align:center;
}

.timeline-list{
    position:relative;
}

.timeline-list::before{
    content:"";

    position:absolute;
    top:12px;
    bottom:20px;
    left:13px;

    width:2px;

    background:var(--line);
}

.timeline-item{
    position:relative;

    margin-bottom:24px;
    padding-left:48px;
}

.timeline-dot{
    position:absolute;
    top:7px;
    left:4px;

    width:20px;
    height:20px;

    border:5px solid var(--panel);
    border-radius:50%;

    background:#536078;

    box-shadow:
        0 0 0 2px
        var(--line);
}

.status-completed .timeline-dot{
    background:var(--green);
}

.status-in_progress .timeline-dot{
    background:var(--purple2);
}

.timeline-content{
    padding:20px;

    border:1px solid var(--line);
    border-radius:16px;

    background:#0d1119;
}

.timeline-title{
    display:flex;
    justify-content:space-between;
    gap:20px;
}

.timeline-title h3{
    margin:2px 0 8px;
}

.timeline-title small{
    color:#91a5d1;
}

.timeline-title > span{
    color:var(--muted);
    font-size:12px;
}

.timeline-content > p{
    color:var(--muted);
}

.preview-box{
    margin:18px 0;
}

.preview-box video{
    width:100%;
    max-height:620px;

    border-radius:14px;

    background:#000;
}

.preview-placeholder span,
.preview-placeholder strong,
.preview-placeholder small{
    display:block;
}

.preview-placeholder span{
    color:var(--purple2);
    font-size:38px;
}

.comments-box{
    margin-top:20px;
    padding-top:18px;

    border-top:1px solid var(--line);
}

.comments-box h4{
    margin:0 0 12px;
}

.comment{
    margin:10px 0;
    padding:8px 12px;

    border-left:2px solid #3d465b;
}

.comment span{
    font-weight:800;
}

.comment small{
    margin-left:10px;

    color:var(--muted);
}

.comment p{
    margin:5px 0;
}

.comment-form{
    display:grid;
    grid-template-columns:
        180px 1fr auto;

    align-items:end;
    gap:10px;

    margin-top:14px;
}

/* =========================================================
   QUESTIONNAIRE LOCATION
   ========================================================= */

.location-builder{
    padding-top:22px;
    border-top:1px solid var(--line);
}

.location-builder__header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.location-builder__header h3,
.location-builder__header p{
    margin:0;
}

.location-builder__header p{
    margin-top:5px;
    color:var(--muted);
}

.location-summary{
    display:flex;
    align-items:center;
    gap:15px;

    margin-top:18px;
    padding:17px;

    border:1px dashed #40495c;
    border-radius:15px;

    background:#0c1018;
}

.location-summary.has-location{
    border-style:solid;
    border-color:#3e376b;

    background:#111024;
}

.location-summary__pin{
    flex:0 0 44px;

    width:44px;
    height:44px;

    display:grid;
    place-items:center;

    border-radius:13px;

    background:#201a45;
    color:#a896ff;

    font-size:25px;
}

.location-summary strong,
.location-summary span,
.location-summary small{
    display:block;
}

.location-summary span{
    margin:3px 0;
    color:var(--muted);
}

.location-summary small{
    color:#7f91b7;
}

.choice-card{
    display:flex !important;
    align-items:flex-start;
    gap:10px;

    padding:14px;

    border:1px solid var(--line);
    border-radius:13px;

    background:#0d1119;

    cursor:pointer;
}

.choice-card input{
    width:auto !important;
    margin:4px 0 0 !important;

    accent-color:var(--purple);
}

.choice-card strong,
.choice-card small{
    display:block;
}

.choice-card small{
    margin-top:3px;
}

.nested-grid{
    margin-top:10px;
}

.venue-photo-field input[type="file"]{
    padding:10px;
}

.current-location-photo{
    margin-top:16px;
}

.current-location-photo span{
    display:block;

    margin-bottom:8px;

    color:var(--muted);
    font-size:12px;
}

.current-location-photo img{
    width:min(100%,560px);
    max-height:320px;

    border:1px solid var(--line);
    border-radius:14px;

    object-fit:cover;
}

/* =========================================================
   MAP MODAL
   ========================================================= */

.map-modal{
    display:none;

    position:fixed;
    inset:0;
    z-index:200;
}

.map-modal.is-open{
    display:grid;
    place-items:center;
}

.map-modal__backdrop{
    position:absolute;
    inset:0;

    background:rgba(0,0,0,.72);
    backdrop-filter:blur(8px);
}

.map-modal__dialog{
    position:relative;

    width:min(1100px,calc(100vw - 32px));
    max-height:calc(100vh - 32px);

    overflow:auto;

    padding:24px;

    border:1px solid #333c50;
    border-radius:22px;

    background:#0e131c;

    box-shadow:
        0 30px 90px
        rgba(0,0,0,.55);
}

.map-modal__header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
}

.map-modal__header small{
    color:#9cb0df;
    font-weight:800;
    letter-spacing:.16em;
}

.map-modal__header h2{
    margin:5px 0 0;
}

.map-modal__close{
    width:42px;
    height:42px;

    border:0;
    border-radius:12px;

    background:#1c2230;
    color:#fff;

    font-size:27px;
    cursor:pointer;
}

.map-search-row{
    display:grid;
    grid-template-columns:1fr auto;
    gap:10px;

    margin-top:20px;
}

.map-search-row input{
    width:100%;
    padding:14px 15px;

    border:1px solid var(--line);
    border-radius:12px;

    background:#090d14;
    color:#fff;

    font:inherit;
    outline:none;
}

.map-search-row input:focus{
    border-color:var(--purple);
}

.map-search-help{
    margin:8px 0;

    color:var(--muted);
    font-size:12px;
}

.map-search-results{
    display:grid;
    gap:8px;

    max-height:210px;
    margin-bottom:12px;

    overflow:auto;
}

.map-result-item{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:3px;

    padding:11px 13px;

    border:1px solid var(--line);
    border-radius:11px;

    background:#111722;
    color:#fff;

    text-align:left;
    cursor:pointer;
}

.map-result-item:hover{
    border-color:var(--purple);
}

.map-result-item span,
.map-result-message{
    color:var(--muted);
    font-size:12px;
}

.map-result-message{
    padding:10px;
}

.map-result-message.error{
    color:#ff9da7;
}

.event-map{
    width:100%;
    height:480px;

    overflow:hidden;

    border:1px solid var(--line);
    border-radius:16px;

    background:#070a10;
}

.map-selection-preview{
    margin-top:14px;
    padding:14px;

    border:1px solid var(--line);
    border-radius:13px;

    background:#090d14;
}

.map-selection-preview.no-location{
    opacity:.8;
}

.map-selection-preview strong,
.map-selection-preview span,
.map-selection-preview small{
    display:block;
}

.map-selection-preview span{
    margin:3px 0;
    color:var(--muted);
}

.map-selection-preview small{
    color:#8395be;
}

.location-confirmation-modal{
    margin-top:14px;
    padding:17px;

    border:1px solid var(--line);
    border-radius:14px;

    background:#090d14;
}

.location-confirmation-modal h3{
    margin:0 0 12px;
    font-size:17px;
}

.location-confirmation-options{
    display:grid;
    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:10px;
}

.choice-card:has(input:checked){
    border-color:var(--purple);
    background:#15132a;
}

.modal-manual-location{
    display:none;

    margin-top:14px;
    padding:18px;

    border:1px solid #2e3b52;
    border-radius:14px;

    background:#0c111b;
}

.modal-manual-location.is-visible{
    display:block;
}

.map-modal__actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;

    margin-top:16px;
}

.map-modal__actions button:disabled{
    opacity:.45;
    cursor:not-allowed;
}

.leaflet-container{
    background:#080b10;
    font-family:Inter,"Segoe UI",Arial,sans-serif;
}

.leaflet-control-layers{
    overflow:hidden;

    border:0 !important;
    border-radius:10px !important;

    background:rgba(13,17,25,.94) !important;
    color:#fff !important;
}

.leaflet-control-layers label{
    color:#fff;
}

/* =========================================================
   COMPACT PALETTES
   ========================================================= */

.compact-palette-panel{
    padding:20px;

    border:1px solid var(--line);
    border-radius:16px;

    background:#0c1018;
}

.compact-palette-title{
    margin-bottom:14px;

    color:#8db0ff;

    font-size:12px;
    font-weight:800;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.compact-palette-grid{
    display:grid;
    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:10px;
}

.palette-card{
    min-height:58px;

    display:flex;
    align-items:center;
    gap:11px;

    padding:10px 13px;

    border:1px solid #2d3d60;
    border-radius:13px;

    background:#10203d;
    color:#9fbbf3;

    text-align:left;
    cursor:pointer;

    transition:
        border-color .15s ease,
        transform .15s ease,
        background .15s ease;
}

.palette-card:hover{
    transform:translateY(-1px);
    border-color:#5c7cc8;
}

.palette-card.is-selected{
    border-color:#5a86ff;

    background:#14284c;
    color:#fff;

    box-shadow:
        0 0 0 1px
        rgba(90,134,255,.15);
}

.palette-dots{
    flex:0 0 auto;

    display:flex;
    align-items:center;
    gap:4px;
}

.palette-dot{
    width:18px;
    height:18px;

    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;

    background:var(--dot-color);
}

.palette-card__name{
    font-size:14px;
}

.palette-card.custom-card{
    color:#a9c0ff;
}

.compact-custom-panel{
    display:none;

    margin-top:14px;
    padding:16px;

    border:1px solid #29416d;
    border-radius:14px;

    background:#0f1d38;
}

.compact-custom-panel.is-open{
    display:block;
}

.compact-custom-panel__title{
    margin-bottom:10px;

    color:#77a3ff;

    font-size:12px;
    font-weight:800;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.compact-hex-row{
    display:grid;
    grid-template-columns:
        minmax(0,1fr)
        46px
        60px;

    align-items:center;
    gap:10px;
}

.compact-hex-row input{
    width:100%;
    margin:0;
    padding:13px 15px;

    border:1px solid #315086;
    border-radius:12px;

    background:#132647;
    color:#fff;

    font:inherit;
    outline:none;
}

.compact-hex-row input:focus{
    border-color:#6e91ff;
}

.compact-hex-row input.is-invalid{
    border-color:var(--red);
}

.compact-color-preview{
    width:42px;
    height:42px;

    display:block;

    border:2px solid #354968;
    border-radius:50%;

    background:
        var(
            --preview-color,
            #000080
        );
}

.compact-add-color{
    height:48px;

    border:0;
    border-radius:12px;

    background:#4d7cfe;
    color:#fff;

    font-size:28px;
    line-height:1;

    cursor:pointer;
}

.selected-colors{
    display:flex;
    flex-wrap:wrap;
    gap:8px;

    margin-top:14px;
}

.selected-color-chip{
    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:7px 10px;

    border:1px solid #315086;
    border-radius:10px;

    background:#102343;
    color:#fff;

    cursor:pointer;
}

.selected-color-chip > span{
    width:20px;
    height:20px;

    border:1px solid rgba(255,255,255,.2);
    border-radius:50%;

    background:var(--chip-color);
}

.selected-color-chip strong{
    font-size:13px;
}

.selected-color-chip small{
    color:#9fb1d4;
    font-size:17px;
}

/* =========================================================
   ADDITIONAL ELEMENTS
   ========================================================= */

.selection-section,
.priority-section{
    padding:20px;

    border:1px solid var(--line);
    border-radius:16px;

    background:#0c1018;
}

.selection-section__heading small,
.priority-section legend{
    color:#8db0ff;
    font-size:12px;
    font-weight:800;
    letter-spacing:.14em;
}

.selection-section__heading p{
    margin:5px 0 0;
    color:var(--muted);
}

.option-chip-grid{
    display:flex;
    flex-wrap:wrap;
    gap:10px;

    margin-top:16px;
}

.option-chip{
    position:relative;

    display:inline-flex;

    margin:0;

    cursor:pointer;
}

.option-chip input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.option-chip span{
    min-height:46px;

    display:inline-flex;
    align-items:center;

    padding:10px 17px;

    border:1px solid #315086;
    border-radius:999px;

    background:#0c1425;
    color:#9fbbf3;

    font-size:14px;
    font-weight:500;

    transition:.15s ease;
}

.option-chip:hover span{
    border-color:#5c7cc8;
    color:#fff;
}

.option-chip.is-selected span,
.option-chip input:checked + span{
    border-color:#5a86ff;

    background:#14284c;
    color:#fff;
}

.option-chip.is-selected span::before,
.option-chip input:checked + span::before{
    content:"✓";
    margin-right:7px;
}

.other-element-field{
    display:none;
    margin-top:16px;
}

.other-element-field.is-visible{
    display:block;
}

/* =========================================================
   PRIORITY
   ========================================================= */

.priority-section{
    margin:0;
}

.priority-section legend{
    padding:0;
    margin-bottom:14px;
}

.priority-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;

    margin-top:14px;
}

.priority-card{
    position:relative;

    height:48px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0 18px;

    border:1px solid #4d73ff;
    border-radius:14px;

    background:#162544;

    cursor:pointer;

    transition:all .20s ease;
}

.priority-card input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.priority-card span{
    color:#79a1ff;

    font-size:15px;
    font-weight:600;
    line-height:1;

    transition:color .20s ease;
}

.priority-card:hover{
    border-color:#5d84ff;
    background:#1b2d52;
}

.priority-card:hover span{
    color:#a8c2ff;
}

.priority-card.is-selected,
.priority-card:has(input:checked){
    border-color:#6b8dff;
    background:#355cff;
}

.priority-card.is-selected span,
.priority-card:has(input:checked) span{
    color:#fff;
    font-weight:700;
}

/* =========================================================
   REFERENCES FINAL COMPACT DESIGN
   ========================================================= */

.references-page{
    max-width:1000px;
    margin-left:auto;
    margin-right:auto;
    padding:36px;
}

.references-page__header{
    margin-bottom:18px;
}

.references-page__header h2{
    margin:0;

    color:#f6f7fb;

    font-size:28px;
    line-height:1.2;
}

.references-page__header p{
    max-width:800px;
    margin:8px 0 0;

    color:#82a3df;

    font-size:16px;
    line-height:1.5;
}

.references-sequence-alert{
    display:flex;
    align-items:flex-start;
    gap:12px;

    margin:0 0 28px;
    padding:15px 17px;

    border:1px solid #765b00;
    border-radius:15px;

    background:rgba(91,68,0,.28);
    color:#ffc400;
}

.references-sequence-alert__icon{
    flex:0 0 auto;

    margin-top:1px;

    color:#ffc400;

    font-size:17px;
    line-height:1.4;
}

.references-sequence-alert p{
    margin:0;

    color:#ffc400;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size:13px;
    line-height:1.7;
}

.references-sequence-alert strong{
    font-weight:800;
}

.references-lock-message,
.references-deadline-message{
    margin-bottom:24px;
}

.references-upload-form{
    margin:0;
}

.references-dropzone{
    min-height:225px;

    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:6px;

    padding:28px;

    border:2px dashed #244885;
    border-radius:17px;

    background:#071126;

    cursor:pointer;

    transition:
        border-color .2s ease,
        background .2s ease;
}

.references-dropzone:hover,
.references-dropzone.is-dragover{
    border-color:#4d7cfe;
    background:#0a1730;
}

.references-dropzone input{
    display:none;
}

.references-dropzone__icon{
    width:58px;
    height:58px;

    display:grid;
    place-items:center;

    margin-bottom:8px;

    border-radius:14px;

    background:#122343;
    color:#8aa6d9;

    font-size:31px;
    line-height:1;
}

.references-dropzone strong{
    color:#fff;

    font-size:16px;
    font-weight:800;
}

.references-dropzone small{
    color:#7191cc;
    font-size:13px;
}

.reference-upload-status{
    min-height:20px;
    margin-top:8px;

    color:#8ca9df;
    font-size:12px;
}

.references-list-heading{
    margin:24px 0 13px;

    color:#7ca0e5;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size:13px;
    letter-spacing:.12em;
}

.references-list{
    display:grid;
    gap:15px;
}

.reference-row{
    position:relative;

    width:100%;
    padding:15px;

    display:grid;
    grid-template-columns:
        38px
        120px
        minmax(0,1fr);

    align-items:start;
    gap:14px;

    border:1px solid #203a68;
    border-radius:16px;

    background:#0d1930;

    transition:
        opacity .18s ease,
        transform .18s ease,
        border-color .18s ease;
}

.reference-row:hover{
    border-color:#31568f;
}

.reference-row.dragging{
    opacity:.42;
    transform:scale(.995);
}

.reference-row.is-deleting{
    opacity:.25;
    pointer-events:none;
}

.reference-row__number{
    padding-top:1px;
}

.reference-row .reference-number{
    position:static;

    width:34px;
    height:34px;

    display:grid;
    place-items:center;

    border-radius:9px;

    background:#14316a;
    color:#72a0ff;

    font-size:13px;
    font-weight:800;
}

.reference-row__image{
    width:120px;
    height:80px;

    overflow:hidden;

    border:1px solid #29436f;
    border-radius:10px;

    background:#03070d;
}

.reference-row__image img{
    width:120px !important;
    height:80px !important;
    min-width:120px !important;
    max-width:120px !important;
    min-height:80px !important;
    max-height:80px !important;

    display:block;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;
    border-radius:0 !important;

    object-fit:contain !important;

    background:#03070d;
}

.reference-row__content{
    min-width:0;
}

.reference-row__header{
    min-height:38px;

    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:15px;

    margin-bottom:9px;
}

.reference-row__file{
    min-width:0;
}

.reference-row__file strong,
.reference-row__file small{
    display:block;
}

.reference-row__file strong{
    overflow:hidden;

    color:#fff;

    font-size:15px;
    font-weight:800;

    text-overflow:ellipsis;
    white-space:nowrap;
}

.reference-row__file small{
    margin-top:2px;

    color:#7ca0df;
    font-size:12px;
}

.reference-row__actions{
    flex:0 0 auto;

    display:flex;
    align-items:center;
    gap:7px;
}

.reference-reorder-handle,
.reference-delete-button{
    position:relative;

    width:34px;
    height:34px;

    display:grid;
    place-items:center;

    margin:0;
    padding:0;

    border:1px solid #29436f;
    border-radius:9px;

    background:#12213b;
    color:#86a1cf;

    line-height:1;
}

.reference-reorder-handle{
    font-size:20px;

    cursor:grab;
    user-select:none;
}

.reference-reorder-handle:active{
    cursor:grabbing;
}

.reference-reorder-handle:hover,
.reference-reorder-handle:focus{
    border-color:#5277ba;

    background:#172b4d;
    color:#b5caff;

    outline:none;
}

.reference-delete-button{
    position:static !important;

    color:#aebbd4;

    font-size:23px;

    cursor:pointer;
}

.reference-delete-button:hover{
    border-color:#71323c;

    background:#251519;
    color:#ff7c88;
}

.reference-action-tooltip{
    position:absolute;
    right:0;
    bottom:calc(100% + 9px);
    z-index:20;

    width:max-content;
    max-width:190px;

    display:block;

    padding:7px 10px;

    border:1px solid #35527e;
    border-radius:8px;

    background:#07101f;
    color:#d8e4ff;

    font-size:11px;
    font-weight:600;
    line-height:1.25;

    opacity:0;
    visibility:hidden;
    transform:translateY(4px);

    pointer-events:none;

    transition:
        opacity .15s ease,
        visibility .15s ease,
        transform .15s ease;
}

.reference-action-tooltip::after{
    content:"";

    position:absolute;
    top:100%;
    right:12px;

    border:5px solid transparent;
    border-top-color:#35527e;
}

.reference-reorder-handle:hover
.reference-action-tooltip,
.reference-reorder-handle:focus
.reference-action-tooltip{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.reference-description-label{
    width:100%;

    display:block;

    margin:0;
}

.reference-row .reference-description{
    width:100% !important;
    min-height:76px !important;
    max-height:180px;

    margin:0 !important;
    padding:12px 14px !important;

    resize:vertical;

    border:1px solid #203a68 !important;
    border-radius:11px !important;

    background:#101d35 !important;
    color:#fff !important;

    font:
        13px/1.65
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    outline:none;
}

.reference-row .reference-description::placeholder{
    color:#5d739d;
}

.reference-row .reference-description:focus{
    border-color:#4d7cfe !important;
}

.reference-row__save-status{
    min-height:16px;

    display:flex;
    justify-content:flex-end;

    margin-top:5px;
}

.reference-save-state{
    color:#7191cc;
    font-size:11px;
}

/* =========================================================
   HELPERS
   ========================================================= */

.muted{
    color:var(--muted);
}

.flash{
    position:fixed;
    top:96px;
    right:24px;
    z-index:100;

    max-width:420px;
    padding:14px 18px;

    border:1px solid #2c5c50;
    border-radius:12px;

    background:#15201d;
}

.flash-error{
    border-color:#71323c;
    background:#251519;
}

.footer{
    padding:26px;

    color:var(--muted);
    text-align:center;
}

.landing{
    min-height:100vh;

    display:grid;
    place-items:center;
}

.landing-card{
    max-width:580px;
    padding:40px;

    border:1px solid var(--line);
    border-radius:22px;

    background:var(--panel);

    text-align:center;
}

.landing-card code{
    color:#c7baff;
}

.sr-only{
    position:absolute !important;

    width:1px !important;
    height:1px !important;

    padding:0 !important;
    margin:-1px !important;

    overflow:hidden !important;

    clip:rect(0,0,0,0) !important;

    white-space:nowrap !important;

    border:0 !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:900px){

    .topbar{
        padding:0 16px;
    }

    .brand{
        min-width:auto;
    }

    .brand span:last-child,
    .project-status{
        display:none;
    }

    .topnav{
        justify-content:flex-end;
        overflow:auto;
    }

    .page-shell{
        padding-inline:16px;
    }

    .hero{
        align-items:flex-start;
        flex-direction:column;
    }

    .form-grid{
        grid-template-columns:1fr;
    }

    .reference-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .comment-form{
        grid-template-columns:1fr;
    }

    .upload-box{
        align-items:stretch;
        flex-direction:column;
    }

    .compact-palette-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .location-confirmation-options,
    .priority-grid{
        grid-template-columns:1fr;
    }

    .event-map{
        height:390px;
    }
}

@media(max-width:760px){

    .references-page{
        padding:22px 18px;
    }

    .reference-row{
        grid-template-columns:
            34px
            92px
            minmax(0,1fr);

        gap:10px;
        padding:12px;
    }

    .reference-row__image,
    .reference-row__image img{
        width:92px !important;
        min-width:92px !important;
        max-width:92px !important;

        height:66px !important;
        min-height:66px !important;
        max-height:66px !important;
    }

    .reference-row__header{
        align-items:flex-start;
    }
}

@media(max-width:560px){

    .topbar{
        height:auto;
        min-height:78px;

        flex-wrap:wrap;

        padding-block:10px;
    }

    .topnav{
        order:2;

        width:100%;

        justify-content:flex-start;
    }

    .topnav a{
        padding:10px 12px;
        white-space:nowrap;
    }

    .page-shell{
        padding-top:150px;
    }

    .section-card{
        padding:20px;
    }

    .reference-grid{
        grid-template-columns:1fr;
    }

    .section-heading{
        align-items:flex-start;
    }

    .section-heading .pill{
        display:none;
    }

    .location-builder__header{
        align-items:flex-start;
        flex-direction:column;
    }

    .location-builder__header .btn-secondary{
        width:100%;
    }

    .map-modal__dialog{
        width:calc(100vw - 18px);
        max-height:calc(100vh - 18px);

        padding:17px;
    }

    .map-search-row{
        grid-template-columns:1fr;
    }

    .map-search-row .btn-primary{
        width:100%;
    }

    .event-map{
        height:330px;
    }

    .compact-palette-grid{
        grid-template-columns:1fr;
    }

    .compact-hex-row{
        grid-template-columns:
            minmax(0,1fr)
            44px;
    }

    .compact-add-color{
        grid-column:1 / -1;
    }

    .map-modal__actions{
        flex-direction:column-reverse;
    }

    .map-modal__actions button{
        width:100%;
    }

    .reference-row{
        grid-template-columns:
            34px
            minmax(0,1fr);
    }

    .reference-row__image{
        grid-column:2;
    }

    .reference-row__content{
        grid-column:1 / -1;
    }

    .reference-row__actions{
        position:absolute;
        top:12px;
        right:12px;
    }

    .references-dropzone{
        min-height:190px;
        padding:20px;
    }
}

/* =========================================================
   REFERENCES SUBMIT / UNLOCK WORKFLOW
   ========================================================= */
.notice.success{
    border-color:#23584f;
    background:#10211d;
    color:#a9f2df;
}

.references-submitted-message,
.references-edit-window-message{
    margin-bottom:24px;
}

.references-final-actions{
    display:flex;
    justify-content:flex-end;
    margin-top:24px;
}

.references-final-actions form{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:12px;
}

.references-final-actions small{
    width:100%;
    color:var(--muted);
    text-align:right;
}

.references-submit-button,
.references-unlock-button{
    min-width:210px;
}

.reference-description:disabled{
    opacity:.78;
    cursor:not-allowed;
}

.reference-save-state.is-working{
    color:#ffcc66;
}

.reference-save-state.is-success{
    color:#2fd4b0;
}

.reference-save-state.is-error{
    color:#ff6b78;
}

.reference-upload-status.is-working{
    color:#ffcc66;
}

.reference-upload-status.is-success{
    color:#2fd4b0;
}

.reference-upload-status.is-error{
    color:#ff6b78;
}

@media(max-width:560px){
    .references-final-actions,
    .references-final-actions form{
        align-items:stretch;
        flex-direction:column;
    }

    .references-final-actions button{
        width:100%;
    }

    .references-final-actions small{
        text-align:left;
    }
}

/* Event details locked commercial specifications */
.locked-specification input:disabled{
  opacity:1;
  color:#f4f6fb;
  background:rgba(130,91,255,.09);
  border-color:rgba(130,91,255,.35);
  cursor:not-allowed;
  font-weight:800;
}
.locked-specification small,label>small{display:block;margin-top:6px;color:#8f9bb1;font-size:11px;line-height:1.45;}
.consultation-mode{border-color:rgba(69,211,164,.45);background:rgba(69,211,164,.09);}


/* Timeline conversations update */
.nav-notification{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:6px;padding:0 5px;border-radius:999px;background:#ff5d6c;color:#fff;font-size:11px;font-weight:900;line-height:1}
.timeline-help{display:flex;gap:12px;align-items:flex-start;margin:16px 0 18px;padding:14px 16px;border:1px solid #343b4d;border-radius:14px;background:#0b1018}.timeline-help strong{white-space:nowrap}.timeline-help span{color:var(--muted)}
.timeline-conversation{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}.conversation-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.conversation-heading strong,.conversation-heading small{display:block}.conversation-heading small{margin-top:3px;color:var(--muted)}
.timeline-comment-list{display:flex;flex-direction:column;gap:12px}.timeline-comment{display:flex;gap:10px;max-width:88%}.timeline-comment.is-client{align-self:flex-end;flex-direction:row-reverse}.timeline-comment__avatar{flex:0 0 34px;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#262d3d;color:#fff;font-size:11px;font-weight:900}.timeline-comment.is-internal .timeline-comment__avatar{background:#6247d8}.timeline-comment.is-client .timeline-comment__avatar{background:#176b58}
.timeline-comment__bubble{padding:11px 13px;border:1px solid #30394c;border-radius:14px;background:#111722}.timeline-comment.is-client .timeline-comment__bubble{background:#10231f;border-color:#245b4f}.timeline-comment__meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:6px}.timeline-comment__meta span{padding:2px 6px;border-radius:999px;background:#20283a;color:#aebadb;font-size:10px;text-transform:uppercase;letter-spacing:.05em}.timeline-comment__meta time{margin-left:auto;color:var(--muted);font-size:11px}.timeline-comment__bubble p{margin:0;line-height:1.55}.conversation-empty{padding:14px;border:1px dashed #394255;border-radius:12px;color:var(--muted);text-align:center}
.timeline-comment-form{display:block;margin-top:14px;padding:12px;border:1px solid #353d50;border-radius:14px;background:#0b1018}.timeline-comment-form textarea{width:100%;resize:vertical;border:0;background:transparent;color:#fff;outline:none;font:inherit}.comment-form-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:10px;border-top:1px solid #2b3343}.comment-form-footer small{color:var(--muted)}.timeline-comment-submit{padding:9px 14px;border:0;border-radius:10px;background:linear-gradient(135deg,#7557ee,#5b43cb);color:#fff;font-weight:800;cursor:pointer}
.timeline-comment-count{padding:4px 8px;border-radius:999px;background:#20283a;color:#cdd6ef;font-size:11px}.timeline-status-badge{padding:4px 8px;border-radius:999px;font-size:10px;text-transform:uppercase;letter-spacing:.06em}.status-label-completed{background:#173b31;color:#85e4bd}.status-label-in_progress{background:#3c3214;color:#f8d56b}.status-label-in_review{background:#183454;color:#8bc3ff}.status-label-approved{background:#173b31;color:#85e4bd}.status-label-pending{background:#252a36;color:#aeb6c9}
@media(max-width:700px){.timeline-comment{max-width:100%}.timeline-help{flex-direction:column}.timeline-comment__meta time{width:100%;margin-left:0}.comment-form-footer{align-items:flex-start;flex-direction:column}.timeline-comment-submit{width:100%}}

.project-conversation-card{margin:0 0 18px;padding:18px;border:1px solid #343d51;border-radius:16px;background:#0d121b}.conversation-resolved{display:inline-block;margin-top:8px;color:#8bd8b8;font-weight:800}

/* =========================================================
   CLIENT TIMELINE V2 — VERTICAL TRACK + CHAT
   ========================================================= */
.timeline-redesign{
  --timeline-blue:#4f8cff;
  --timeline-green:#22d3a6;
  --timeline-yellow:#ffbf00;
  --timeline-muted:#7990ba;
  overflow:visible;
}
.timeline-main-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:20px;
}
.timeline-main-header__identity{
  display:flex;
  align-items:center;
  gap:16px;
}
.timeline-main-header__identity small{
  display:block;
  margin-bottom:5px;
  color:#8fa9ff;
  font-size:11px;
  font-weight:900;
  letter-spacing:.16em;
}
.timeline-main-header__identity h2{margin:0}
.timeline-summary-card{
  margin-bottom:18px;
  padding:22px 28px;
  border:1px solid #243452;
  border-radius:18px;
  background:#0d1830;
}
.timeline-summary-card__row{
  display:flex;
  justify-content:space-between;
  gap:16px;
  color:#7da5e8;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.05em;
}
.timeline-summary-card__row strong{color:#4f8cff}
.timeline-redesign .timeline-progress{
  height:7px;
  margin-top:24px;
  overflow:hidden;
  border-radius:999px;
  background:#142542;
}
.timeline-redesign .timeline-progress span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#4f8cff,#6b97ff);
}
.general-chat-card{
  margin-bottom:22px;
  overflow:hidden;
  border:1px solid #26364f;
  border-radius:16px;
  background:#0c131f;
}
.general-chat-card summary{
  display:flex;
  align-items:center;
  gap:13px;
  padding:17px 18px;
  cursor:pointer;
  list-style:none;
}
.general-chat-card summary::-webkit-details-marker{display:none}
.general-chat-card__icon{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:12px;
  background:#182743;
}
.general-chat-card__copy{flex:1;min-width:0}
.general-chat-card__copy strong,.general-chat-card__copy small{display:block}
.general-chat-card__copy small{margin-top:3px;color:var(--muted)}
.general-chat-card__meta{
  display:flex;
  align-items:center;
  gap:8px;
  color:#91a5c9;
  font-size:12px;
}
.general-chat-card__body{
  padding:0 18px 18px;
  border-top:1px solid #202d43;
}
.timeline-track{
  position:relative;
  padding:2px 0 4px;
}
.timeline-track::before{
  content:"";
  position:absolute;
  top:28px;
  bottom:32px;
  left:20px;
  width:1px;
  background:#24426d;
}
.timeline-phase{
  position:relative;
  margin:0;
  padding:0;
}
.timeline-phase__trigger{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto 22px;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:52px;
  padding:8px 0;
  border:0;
  border-radius:12px;
  background:transparent;
  color:#8da5cf;
  text-align:left;
  cursor:pointer;
  font:inherit;
  appearance:none;
}
.timeline-phase__trigger:hover{
  background:rgba(64,98,155,.10);
}
.timeline-phase__marker{
  position:relative;
  display:grid;
  place-items:center;
  width:17px;
  height:17px;
  margin-left:12px;
  border:2px solid #6685b6;
  border-radius:50%;
  background:#0c1422;
  color:#06120f;
  font-size:11px;
  font-weight:900;
}
.timeline-phase.status-completed .timeline-phase__marker{
  border-color:var(--timeline-green);
  background:var(--timeline-green);
}
.timeline-phase.status-in_progress .timeline-phase__marker{
  width:22px;
  height:22px;
  margin-left:9px;
  border:0;
  background:transparent;
  color:var(--timeline-yellow);
  font-size:22px;
}
.timeline-phase.status-in_progress .timeline-phase__trigger,
.timeline-phase.is-open .timeline-phase__trigger{
  color:#f3f7ff;
}
.timeline-phase.status-in_progress .timeline-phase__title-row strong{
  color:var(--timeline-yellow);
}
.timeline-phase__main{min-width:0}
.timeline-phase__title-row{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}
.timeline-phase__title-row strong{
  overflow:hidden;
  color:inherit;
  font-size:16px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.timeline-phase__preview-text{
  display:block;
  overflow:hidden;
  margin-top:3px;
  color:#657ca4;
  font-size:12px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.timeline-phase__date{
  min-width:62px;
  color:#6f92ce;
  font-size:12px;
  text-align:right;
}
.timeline-phase__chevron{
  color:#6581ad;
  font-size:18px;
  transition:transform .2s ease;
}
.timeline-phase.is-open .timeline-phase__chevron{transform:rotate(180deg)}
.timeline-phase__panel{
  margin:0 0 8px 42px;
  border:1px solid #27364e;
  border-radius:16px;
  background:#0a111c;
}
.timeline-phase__panel[hidden]{display:none!important}
.timeline-phase__panel-inner{padding:18px}
.timeline-phase__description{
  margin:0 0 16px;
  color:#b1bfd8;
  line-height:1.6;
}
.timeline-status-badge,
.reply-state-badge,
.new-message-badge,
.timeline-comment-count{
  display:inline-flex;
  align-items:center;
  gap:4px;
  flex:0 0 auto;
  padding:4px 9px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.02em;
  text-transform:none;
}
.new-message-badge{
  background:#d9344f;
  color:#fff;
  box-shadow:0 0 0 3px rgba(217,52,79,.12);
}
.reply-state-badge.is-waiting{
  background:#3a2d0a;
  color:#ffd66b;
}
.status-label-in_progress{
  background:#4b3908;
  color:#ffd359;
}
.timeline-comment-count{
  background:#17243a;
  color:#9bb8e8;
}
.timeline-conversation{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid #26344a;
}
.timeline-chat{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:8px 0;
}
.chat-message{
  display:flex;
  align-items:flex-end;
  gap:9px;
  max-width:82%;
}
.chat-message.is-client{
  align-self:flex-end;
  flex-direction:row-reverse;
}
.chat-message.is-team{align-self:flex-start}
.chat-avatar{
  flex:0 0 32px;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background:#46359d;
  color:#fff;
  font-size:10px;
  font-weight:900;
}
.chat-message.is-client .chat-avatar{background:#176e5c}
.chat-message__content{min-width:0}
.chat-message__heading{
  display:flex;
  align-items:center;
  gap:7px;
  margin:0 4px 5px;
  color:#8699b9;
  font-size:10px;
}
.chat-message__heading strong{color:#eaf0ff;font-size:11px}
.chat-message__heading time{margin-left:auto}
.chat-bubble{
  position:relative;
  padding:11px 14px;
  border:1px solid #33425b;
  border-radius:14px 14px 14px 4px;
  background:#121c2b;
  box-shadow:0 8px 22px rgba(0,0,0,.12);
}
.chat-message.is-client .chat-bubble{
  border-color:#255f53;
  border-radius:14px 14px 4px 14px;
  background:#102720;
}
.chat-message.is-unread .chat-bubble{
  border-color:#6c7cff;
  box-shadow:0 0 0 3px rgba(108,124,255,.10);
}
.chat-bubble p{margin:0;color:#edf3ff;line-height:1.55}
.chat-message__state{
  display:flex;
  align-items:center;
  gap:5px;
  margin:5px 5px 0;
  color:#7085a7;
  font-size:10px;
}
.chat-message.is-client .chat-message__state{justify-content:flex-end}
.chat-message__state.is-new{color:#9dadff;font-weight:800}
.chat-message__state.is-waiting{color:#e7bb53}
.chat-message__state.is-seen{color:#6e9fdc}
.unread-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#6679ff;
  box-shadow:0 0 8px #6679ff;
}
.resolved-label{
  margin-left:6px;
  padding:2px 6px;
  border-radius:999px;
  background:#16392f;
  color:#72d9b3;
}
.chat-composer{
  margin-top:16px;
  border-color:#2b3c57;
  background:#0d1725;
}
.chat-composer textarea{min-height:78px}
.conversation-empty{
  margin:8px 0;
  padding:18px;
  border:1px dashed #31425d;
  border-radius:13px;
  background:#0c1420;
  color:#7890b6;
}
@media(max-width:760px){
  .timeline-main-header{align-items:flex-start}
  .timeline-main-header .pill{display:none}
  .timeline-summary-card{padding:18px}
  .timeline-phase__trigger{grid-template-columns:38px minmax(0,1fr) auto 18px}
  .timeline-phase__date{min-width:48px}
  .timeline-phase__preview-text{display:none}
  .timeline-phase__panel{margin-left:36px}
  .chat-message{max-width:96%}
  .general-chat-card__meta>span:not(.new-message-badge){display:none}
}
@media(max-width:520px){
  .timeline-phase__title-row{align-items:flex-start;flex-wrap:wrap}
  .timeline-phase__title-row strong{width:100%;white-space:normal}
  .timeline-phase__date{font-size:11px}
  .chat-message{max-width:100%}
  .chat-avatar{display:none}
  .timeline-phase__panel-inner{padding:14px}
}

/* Timeline status semaphore */
.timeline-phase.status-approved .timeline-phase__marker{border-color:#7bdca9;background:#7bdca9}
.timeline-phase.status-cancelled .timeline-phase__marker{border-color:#e85f70;background:#e85f70;color:#fff}
.timeline-phase.status-in_review .timeline-phase__marker{border-color:#55a7e8;background:#163956}
.status-label-pending{background:#302858;color:#b8a4ff}
.status-label-in_review{background:#15364d;color:#76c4ff}
.status-label-approved{background:#153c2b;color:#8be7b5}
.status-label-completed{background:#123c2b;color:#78e5ac}
.status-label-cancelled{background:#4a1e25;color:#ff9cab}
.timeline-phase.status-approved .timeline-phase__title-row strong,.timeline-phase.status-completed .timeline-phase__title-row strong{color:#85e2b0}
.timeline-phase.status-cancelled .timeline-phase__title-row strong{color:#ff8d9b;text-decoration:line-through}

/* Timeline secuencial: las etapas futuras se habilitan una por una */
.timeline-phase.is-sequence-locked{opacity:.58}
.timeline-phase.is-sequence-locked .timeline-phase__trigger{cursor:not-allowed;background:rgba(255,255,255,.02)}
.timeline-phase.is-sequence-locked .timeline-phase__marker{border-color:#687084;background:#252b36;color:#8e96a6}
.timeline-phase.is-sequence-locked .timeline-phase__title-row strong{color:#8e96a6}
.timeline-phase.is-sequence-locked .timeline-status-badge{filter:grayscale(.7)}
.timeline-sequence-notice{border-color:rgba(240,184,75,.28)!important;background:rgba(240,184,75,.08)!important;color:#ffd980!important}
.timeline-phase.status-completed{opacity:1}
.timeline-phase.status-completed .timeline-phase__trigger{background:linear-gradient(90deg,rgba(57,189,131,.08),transparent)}

/* Adjuntos dentro del chat del timeline */
.client-attachment-picker{display:flex;align-items:center;gap:8px;color:#9fb0c9;font-size:12px;cursor:pointer;margin-top:8px}.chat-attachment{margin-top:10px}.chat-attachment img{display:block;width:auto;max-width:min(100%,420px);max-height:280px;object-fit:contain;border-radius:12px;border:1px solid rgba(130,155,200,.25);background:#05080d}.chat-attachment video{display:block;width:min(100%,560px);max-height:340px;border-radius:12px;border:1px solid rgba(130,155,200,.25);background:#05080d}.chat-attachment a{color:#8da9ff}

/* Historial de conversación contenido: la página no crece aunque existan muchos mensajes. */
.timeline-conversation{
  position:relative;
  overflow:hidden;
  border:1px solid #26344a;
  border-radius:16px;
  padding:0;
  background:#0b1421;
}
.timeline-conversation .conversation-heading{
  position:sticky;
  top:0;
  z-index:4;
  margin:0;
  padding:15px 17px;
  border-bottom:1px solid #26344a;
  background:#101a29;
}
.timeline-conversation .timeline-chat{
  max-height:430px;
  min-height:120px;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  padding:16px 18px;
}
.timeline-conversation .conversation-empty{
  margin:16px 18px;
}
.timeline-conversation .chat-composer,
.timeline-conversation .consultation-mode{
  margin:0;
  border-width:1px 0 0;
  border-radius:0;
  padding:16px 18px;
  background:#0d1725;
}

/* =========================================================
   CUMULATIVE PALETTES + VISUAL COLOR PICKER
   ========================================================= */
.visual-color-picker{
  position:relative;
  width:44px;
  height:44px;
  flex:0 0 44px;
  border-radius:50%;
  overflow:hidden;
  border:2px solid rgba(255,255,255,.18);
  box-shadow:0 0 0 3px rgba(139,92,246,.10);
  cursor:pointer;
  background:conic-gradient(#ff0000,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,#ff0000);
}
.visual-color-picker input{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
}
.visual-color-picker span{
  position:absolute;
  inset:8px;
  border-radius:50%;
  background:var(--preview-color,#000080);
  border:2px solid rgba(255,255,255,.75);
  pointer-events:none;
}

/* =========================================================
   CLEAR PROJECT STATUS
   ========================================================= */
.project-status.is-completed span{background:#35d49a;box-shadow:0 0 16px rgba(53,212,154,.75)}
.project-status.is-paused span{background:#f2ba4c;box-shadow:0 0 16px rgba(242,186,76,.65)}
.project-status.is-cancelled span{background:#ff6476;box-shadow:0 0 16px rgba(255,100,118,.65)}

/* =========================================================
   FINAL THANK-YOU MESSAGE
   ========================================================= */
.timeline-completion-message{
  margin-top:28px;
  padding:42px 28px;
  border:1px solid rgba(66,224,167,.34);
  border-radius:24px;
  text-align:center;
  background:
    radial-gradient(circle at 50% 0,rgba(67,214,165,.18),transparent 52%),
    linear-gradient(145deg,rgba(14,36,39,.96),rgba(12,18,30,.98));
  box-shadow:0 24px 70px rgba(0,0,0,.25);
}
.timeline-completion-message__icon{
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  margin:0 auto 18px;
  border-radius:50%;
  background:#3bd5a0;
  color:#061611;
  font-size:34px;
  font-weight:900;
  box-shadow:0 0 0 9px rgba(59,213,160,.10),0 0 38px rgba(59,213,160,.32);
}
.timeline-completion-message small{
  display:block;
  color:#7ee7bf;
  letter-spacing:.18em;
  font-weight:800;
  margin-bottom:10px;
}
.timeline-completion-message h3{
  margin:0;
  font-size:clamp(26px,4vw,44px);
  line-height:1.12;
}
.timeline-completion-message p{
  max-width:720px;
  margin:16px auto 12px;
  color:#aabbd5;
  font-size:17px;
  line-height:1.7;
}
.timeline-completion-message strong{color:#fff;font-size:18px}

.timeline-phase.stage-live-updated{animation:stageLiveUpdate .9s ease}
@keyframes stageLiveUpdate{0%{box-shadow:0 0 0 0 rgba(139,92,246,.7)}100%{box-shadow:0 0 0 12px rgba(139,92,246,0)}}


/* Storyboard slide review */
.storyboard-workspace{margin-top:18px;border:1px solid #28364d;border-radius:18px;background:#0c1422;padding:18px;min-width:0}.storyboard-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}.storyboard-heading h3{margin:4px 0 4px}.storyboard-heading p{margin:0;color:#8fa9cf}.storyboard-empty{padding:28px;border:1px dashed #30415e;border-radius:14px;text-align:center;color:#8fa9cf}.storyboard-slide-list{max-height:720px;overflow:auto;padding-right:6px;display:grid;gap:10px}.storyboard-slide{border:1px solid #263752;border-radius:14px;background:#0f1929;overflow:hidden}.storyboard-slide>summary{list-style:none;display:grid;grid-template-columns:42px 112px 1fr 28px;align-items:center;gap:12px;padding:10px 12px;cursor:pointer}.storyboard-slide>summary::-webkit-details-marker{display:none}.storyboard-slide>summary>img{width:112px;height:63px;object-fit:contain;background:#03060b;border-radius:8px;border:1px solid #31425f}.storyboard-slide-number{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#173c78;color:#7fb4ff;font-weight:800}.storyboard-slide-title{display:flex;flex-direction:column;gap:4px;min-width:0}.storyboard-slide-title small{color:#8fa9cf}.storyboard-slide-chevron{font-size:20px;color:#8fa9cf;transition:.2s}.storyboard-slide[open] .storyboard-slide-chevron{transform:rotate(180deg)}.storyboard-slide-body{display:grid;grid-template-columns:minmax(300px,1.15fr) minmax(300px,.85fr);gap:16px;padding:16px;border-top:1px solid #263752}.storyboard-slide-image{display:flex;align-items:center;justify-content:center;min-height:260px;background:#02050a;border-radius:12px;overflow:hidden}.storyboard-slide-image img{max-width:100%;max-height:430px;object-fit:contain}.storyboard-chat{display:flex;flex-direction:column;min-height:320px;border:1px solid #293a56;border-radius:12px;background:#0a111e;overflow:hidden}.storyboard-chat-thread{height:270px;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:10px}.storyboard-message{max-width:88%;padding:10px 12px;border-radius:13px;background:#19283d;color:#eef5ff;align-self:flex-start}.storyboard-message.from-company{background:#37265f;align-self:flex-end}.storyboard-message strong{display:block;font-size:12px;margin-bottom:5px}.storyboard-message p{margin:0 0 6px;line-height:1.45}.storyboard-message small{color:#8fa9cf;font-size:11px}.storyboard-comment-form{border-top:1px solid #293a56;padding:10px;display:flex;gap:8px;align-items:flex-end}.storyboard-comment-form textarea{flex:1;min-height:60px;resize:vertical}.storyboard-chat-closed{padding:14px;color:#9aacC7;border-top:1px solid #293a56}.storyboard-download{white-space:nowrap}@media(max-width:900px){.storyboard-slide-body{grid-template-columns:1fr}.storyboard-slide>summary{grid-template-columns:38px 86px 1fr 24px}.storyboard-slide>summary>img{width:86px;height:52px}.storyboard-heading{flex-direction:column}.storyboard-slide-list{max-height:650px}}

/* Storyboard requested refinements */
.storyboard-comment-form textarea{background:#050a12!important;color:#eef5ff!important;border:1px solid #31425f!important;border-radius:12px!important;padding:14px!important;outline:none}.storyboard-comment-form textarea::placeholder{color:#7f8fa8}.storyboard-comment-form textarea:focus{border-color:#7657ff!important;box-shadow:0 0 0 2px rgba(118,87,255,.12)}.storyboard-heading-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.storyboard-unread-badge{display:inline-flex;align-items:center;min-height:34px;padding:6px 11px;border:1px solid #394b69;border-radius:10px;background:#0a111e;color:#9db5d8;font-size:.82rem;font-weight:700;white-space:nowrap}.storyboard-unread-badge:not(:empty)::before{content:'◌';margin-right:7px;color:#8d6cff}

/* Storyboard requested refinements */
.storyboard-comment-form textarea{background:#050a12!important;color:#eef5ff!important;border:1px solid #31425f!important;border-radius:12px!important;padding:14px!important;outline:none}.storyboard-comment-form textarea::placeholder{color:#7f8fa8}.storyboard-comment-form textarea:focus{border-color:#7657ff!important;box-shadow:0 0 0 2px rgba(118,87,255,.12)}.storyboard-heading-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.storyboard-unread-badge{display:inline-flex;align-items:center;min-height:34px;padding:6px 11px;border:1px solid #394b69;border-radius:10px;background:#0a111e;color:#9db5d8;font-size:.82rem;font-weight:700;white-space:nowrap}.storyboard-unread-badge:not(:empty)::before{content:'◌';margin-right:7px;color:#8d6cff}


/* Custom English file picker used in production to avoid browser-localized labels. */
.native-file-input-hidden { position:absolute !important; width:1px !important; height:1px !important; opacity:0 !important; pointer-events:none !important; }
.english-file-picker { display:flex; align-items:center; gap:.65rem; flex-wrap:wrap; margin-top:.35rem; }
.english-file-picker__button { appearance:none; border:1px solid #334155; background:#0a0f18; color:#f8fafc; border-radius:10px; padding:.55rem .85rem; font:inherit; cursor:pointer; }
.english-file-picker__button:hover { border-color:#8b5cf6; }
.english-file-picker__name { color:#94a3b8; font-size:.9rem; overflow-wrap:anywhere; }