:root{
    --bg:#050505;
    --panel:#15171b;
    --panel2:#0d0f12;
    --text:#ffffff;
    --muted:#a4a7ae;
    --red:#e30613;
    --red-dark:#9d000b;
    --gold:#f5c400;
    --gold-soft:rgba(245,196,0,.16);
    --metal:#c6cad2;
    --green:#24a148;
    --border:rgba(255,255,255,.09);
    --shadow:0 24px 70px rgba(0,0,0,.48);
    --gold-shadow:0 0 28px rgba(245,196,0,.16);
    --radius:8px;
}

*{box-sizing:border-box}

body{
    margin:0;
    min-height:100vh;
    font-family:Inter, Arial, Helvetica, sans-serif;
    color:var(--text);
    background:
        linear-gradient(135deg, rgba(255,255,255,.03) 25%, transparent 25%) 0 0/18px 18px,
        radial-gradient(900px 520px at 88% -12%, rgba(245,196,0,.12), transparent 58%),
        radial-gradient(760px 480px at 12% -8%, rgba(227,6,19,.14), transparent 54%),
        linear-gradient(180deg, #050505, #101216 45%, #070707);
    background-attachment:fixed;
}
html{
    -webkit-text-size-adjust:100%;
}

a{color:inherit;text-decoration:none}

.sidebar{
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    width:260px;
    background:linear-gradient(180deg,#050505,#0c0d10);
    border-right:1px solid var(--border);
    padding:28px 18px;
    box-shadow:12px 0 44px rgba(0,0,0,.24);
}

.brand{
    margin-bottom:30px;
    padding:10px 0 18px;
    border-bottom:1px solid rgba(245,196,0,.16);
}
.brand-title{font-size:30px;font-weight:900;letter-spacing:.04em}
.brand-subtitle{font-size:13px;color:var(--muted);margin-top:4px}
.brand-logo{
    display:block;
    width:198px;
    max-width:100%;
    height:auto;
    margin-bottom:8px;
}

nav{display:flex;flex-direction:column;gap:10px}
nav a{
    position:relative;
    padding:13px 14px;
    border-radius:8px;
    color:var(--muted);
    font-weight:800;
    transition:transform .22s ease, color .22s ease, background .22s ease, box-shadow .22s ease;
}
nav a:before{
    content:"";
    position:absolute;
    left:0;
    top:11px;
    bottom:11px;
    width:3px;
    border-radius:3px;
    background:transparent;
    transition:.22s ease;
}
nav a:hover{
    color:#fff;
    background:linear-gradient(90deg,rgba(227,6,19,.14),rgba(245,196,0,.08));
    box-shadow:inset 0 0 0 1px rgba(245,196,0,.08);
    transform:translateX(4px);
}
nav a:hover:before{background:var(--gold)}
.sidebar-note{
    position:absolute;
    left:18px;
    right:18px;
    bottom:24px;
    color:#777;
    font-size:12px;
    line-height:1.6;
}

.main{
    margin-left:260px;
    padding:24px 28px 40px;
    animation:pageIn .45s ease both;
}

.page-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin-bottom:20px;
}
.page-head h1{
    font-size:36px;
    margin:0 0 6px;
    letter-spacing:-.03em;
}
.page-head p{margin:0;color:var(--muted)}

.flash-wrap{margin-bottom:18px}
.flash{
    padding:12px 14px;
    border-radius:8px;
    margin-bottom:8px;
    background:#15171b;
    border:1px solid var(--border);
    animation:dropIn .28s ease both;
}
.flash.success{border-color:rgba(36,161,72,.35)}
.flash.error{border-color:rgba(227,6,19,.45)}

.stats{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:14px;
    margin-bottom:20px;
}
.stat-card{
    position:relative;
    overflow:hidden;
    background:
        linear-gradient(135deg,rgba(245,196,0,.08),transparent 32%),
        linear-gradient(180deg,rgba(30,33,39,.94),rgba(13,15,18,.96));
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:18px;
    box-shadow:var(--shadow);
    transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.stat-card:before{
    content:"";
    position:absolute;
    inset:0;
    border-top:1px solid rgba(255,255,255,.14);
    pointer-events:none;
}
.stat-card span{
    color:var(--muted);
    font-size:13px;
}
.stat-card strong{
    display:block;
    font-size:34px;
    margin-top:8px;
}
.stat-card:hover{
    transform:translateY(-3px);
    border-color:rgba(245,196,0,.22);
    box-shadow:var(--shadow),var(--gold-shadow);
}

.panel{
    position:relative;
    overflow:hidden;
    background:
        linear-gradient(135deg,rgba(255,255,255,.055),transparent 34%),
        linear-gradient(180deg,rgba(23,26,31,.95),rgba(11,13,16,.97));
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:20px;
    box-shadow:var(--shadow);
    margin-bottom:18px;
    animation:panelIn .38s ease both;
}
.panel:before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    border-top:1px solid rgba(255,255,255,.14);
}
.panel:after{
    content:"";
    position:absolute;
    left:20px;
    right:20px;
    top:0;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--gold),transparent);
    opacity:.38;
}
.panel h1,.panel h2{margin:0 0 14px}
.panel-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:14px;
}
.panel-title h2{margin:0}

.two-col{
    display:grid;
    grid-template-columns:390px 1fr;
    gap:18px;
    align-items:start;
}

.detail-layout,
.dashboard-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    align-items:start;
}
.dashboard-grid.wide-left{grid-template-columns:1.35fr .65fr}

.form{
    display:flex;
    flex-direction:column;
    gap:12px;
}
.collapsible-panel{
    padding:0;
}
.collapse-toggle{
    width:100%;
    min-height:76px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:18px 20px;
    border:0;
    background:transparent;
    color:var(--text);
    cursor:pointer;
    text-align:left;
}
.collapse-toggle strong{
    display:block;
    font-size:20px;
}
.collapse-toggle small{
    display:block;
    color:var(--muted);
    margin-top:4px;
}
.collapse-toggle em{
    min-width:74px;
    text-align:center;
    font-style:normal;
    font-weight:900;
    color:#111;
    background:var(--gold);
    border-radius:999px;
    padding:8px 12px;
    transition:.2s ease;
}
.collapse-toggle:hover em{
    transform:translateY(-2px);
    box-shadow:var(--gold-shadow);
}
.collapse-content{
    display:none;
    padding:0 20px 20px;
    animation:panelIn .28s ease both;
}
.collapse-content.open{
    display:block;
}
.create-job-form{
    border-top:1px solid rgba(245,196,0,.16);
    padding-top:16px;
}
label{color:var(--muted);font-weight:800;font-size:13px}
input, textarea, select{
    width:100%;
    padding:13px 14px;
    border-radius:8px;
    border:1px solid #2b3038;
    background:#090b0e;
    color:#fff;
    outline:none;
    font-size:16px;
    transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
textarea{min-height:95px;resize:vertical}
input:focus, textarea:focus, select:focus{
    border-color:var(--gold);
    background:#0c0f13;
    box-shadow:0 0 0 3px var(--gold-soft),0 0 24px rgba(245,196,0,.08);
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:none;
    border-radius:8px;
    padding:12px 16px;
    background:#202329;
    color:#fff;
    font-weight:900;
    cursor:pointer;
    transition:transform .2s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease;
    border:1px solid rgba(255,255,255,.08);
}
.btn:hover{transform:translateY(-2px);background:#2b3038;box-shadow:0 12px 26px rgba(0,0,0,.28)}
.btn.primary{background:linear-gradient(135deg,var(--red),var(--red-dark));border-color:rgba(227,6,19,.4)}
.btn.primary:hover{background:linear-gradient(135deg,#ff1524,var(--red));box-shadow:0 0 30px rgba(227,6,19,.24)}
.btn.danger{
    background:linear-gradient(135deg,#3a1014,#1c0709);
    border-color:rgba(227,6,19,.45);
}
.btn.danger:hover{
    background:linear-gradient(135deg,#e30613,#8f0610);
}
.btn.small{
    width:100%;
    padding:10px;
    margin-top:12px;
}

.search{min-width:260px}
.list,.chart-list,.insight-list,.timeline{display:flex;flex-direction:column;gap:12px}

.job-row, .customer-card{
    display:flex;
    justify-content:space-between;
    gap:14px;
    padding:14px;
    background:#0b0d10;
    border:1px solid var(--border);
    border-radius:8px;
    transition:transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}
.customer-card{display:block}
.job-row:hover, .customer-card:hover{
    border-color:rgba(245,196,0,.28);
    background:linear-gradient(135deg,rgba(245,196,0,.065),#0b0d10 42%);
    transform:translateY(-3px);
    box-shadow:0 18px 38px rgba(0,0,0,.34);
}
.job-row strong, .customer-card strong{display:block;margin-bottom:5px}
.job-row span, .customer-card span{color:var(--muted);font-size:14px}
.job-row p, .customer-card p{color:#999;margin:6px 0 0}

.badge{
    align-self:flex-start;
    white-space:nowrap;
    background:linear-gradient(135deg,var(--red),var(--red-dark));
    color:#fff;
    border-radius:999px;
    padding:7px 10px;
    font-style:normal;
    font-size:12px;
    font-weight:900;
}
.badge.green{background:var(--green)}
.badge.grey{background:#666b74}
.badge.gold{background:linear-gradient(135deg,var(--gold),#a87a00);color:#111}
.badge-stack{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:8px;
}
.muted{color:var(--muted)}
.form-divider{
    color:var(--gold);
    font-size:12px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
    border-top:1px solid rgba(245,196,0,.16);
    padding-top:12px;
    margin-top:4px;
}

.detail-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.chart-row{
    display:grid;
    grid-template-columns:130px 1fr 40px;
    gap:12px;
    align-items:center;
}
.chart-row span,.insight-list span{color:var(--muted);font-size:14px}
.chart-row div{
    height:9px;
    overflow:hidden;
    background:#08090b;
    border:1px solid var(--border);
    border-radius:999px;
}
.chart-row i{
    display:block;
    height:100%;
    min-width:8px;
    background:linear-gradient(90deg,var(--red),#ff5d66,var(--gold));
    border-radius:999px;
}
.insight-list div{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px;
    background:#0b0d10;
    border:1px solid var(--border);
    border-radius:8px;
    transition:.2s ease;
}
.insight-list div:hover{border-color:rgba(245,196,0,.22);transform:translateX(3px)}

.timeline div{
    position:relative;
    padding:0 0 8px 20px;
    border-left:1px solid rgba(227,6,19,.35);
}
.timeline div:before{
    content:"";
    position:absolute;
    left:-5px;
    top:3px;
    width:9px;
    height:9px;
    border-radius:50%;
    background:var(--gold);
    box-shadow:0 0 16px rgba(245,196,0,.45);
}
.timeline p{color:var(--muted);margin:4px 0;line-height:1.45}
.timeline small{color:#737780}

.kanban{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:14px;
}
.kanban-col{
    min-height:600px;
    background:linear-gradient(180deg,rgba(23,26,31,.94),rgba(11,13,16,.96));
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:14px;
    box-shadow:var(--shadow);
}
.kanban-col h2{margin:0 0 14px}
.task-card{
    background:#0b0d10;
    border:1px solid var(--border);
    border-radius:8px;
    padding:14px;
    margin-bottom:12px;
}
.task-card strong, .task-card span{display:block}
.task-card span, .task-card p{color:var(--muted)}
.task-card em{
    display:inline-block;
    color:var(--gold);
    font-style:normal;
    font-weight:900;
    margin-top:4px;
}

.portal-page{
    background:
        linear-gradient(135deg, rgba(255,255,255,.025) 25%, transparent 25%) 0 0/18px 18px,
        radial-gradient(900px 520px at 78% -10%, rgba(245,196,0,.16), transparent 58%),
        radial-gradient(760px 520px at 12% 0%, rgba(227,6,19,.18), transparent 54%),
        linear-gradient(180deg,#050505,#101216 50%,#050505);
}
.portal-shell{
    width:min(1180px, calc(100% - 32px));
    margin:0 auto;
    padding:28px 0 46px;
}
.portal-hero{
    min-height:150px;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    padding-top:10px;
}
.portal-hero p{color:var(--muted);margin:8px 0 0}
.portal-grid{
    display:grid;
    grid-template-columns:.82fr 1.18fr;
    gap:18px;
    align-items:stretch;
}
.portal-grid .panel:first-child{
    min-height:340px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    border-color:rgba(245,196,0,.2);
    box-shadow:var(--shadow),var(--gold-shadow);
}
.portal-grid h1,.portal-result h2{
    font-size:40px;
    margin:0 0 10px;
    letter-spacing:-.03em;
}
.eyebrow{
    display:block;
    color:var(--red);
    font-weight:900;
    text-transform:uppercase;
    font-size:12px;
    letter-spacing:.12em;
    margin-bottom:8px;
}
.portal-summary{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
    margin-top:18px;
}
.portal-summary div{
    padding:12px;
    border:1px solid var(--border);
    border-radius:8px;
    background:#0b0d10;
    transition:.2s ease;
}
.portal-summary div:hover{border-color:rgba(245,196,0,.26);transform:translateY(-2px)}
.portal-summary span{
    display:block;
    color:var(--muted);
    font-size:12px;
    margin-bottom:5px;
}
.tracker{display:grid;gap:14px}
.tracker-item{
    display:grid;
    grid-template-columns:18px 1fr;
    gap:12px;
}
.tracker-item > span{
    width:18px;
    height:18px;
    margin-top:3px;
    border-radius:50%;
    background:var(--gold);
    box-shadow:0 0 18px rgba(245,196,0,.55);
}
.tracker-item p{color:var(--muted);margin:4px 0}
.tracker-item small{color:#737780}
.portal-progress{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:10px;
}
.portal-progress div{
    position:relative;
    padding:14px 10px;
    min-height:94px;
    border:1px solid var(--border);
    border-radius:8px;
    background:#0b0d10;
    overflow:hidden;
}
.portal-progress div:after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:3px;
    background:#2b3038;
}
.portal-progress div.active{
    border-color:rgba(245,196,0,.38);
    background:linear-gradient(135deg,rgba(245,196,0,.14),#0b0d10 58%);
    box-shadow:var(--gold-shadow);
}
.portal-progress div.active:after{background:linear-gradient(90deg,var(--red),var(--gold))}
.portal-progress span{
    display:grid;
    place-items:center;
    width:28px;
    height:28px;
    border-radius:50%;
    background:#202329;
    color:var(--muted);
    font-weight:900;
    margin-bottom:12px;
}
.portal-progress div.active span{
    background:var(--gold);
    color:#111;
}
.portal-progress strong{font-size:13px}

.login-page .sidebar{display:none}
.login-shell{
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:24px;
}
.login-card{
    width:min(460px,100%);
    background:linear-gradient(180deg,rgba(23,26,31,.94),rgba(11,13,16,.96));
    border:1px solid var(--border);
    border-radius:8px;
    padding:28px;
    box-shadow:var(--shadow);
    border-color:rgba(245,196,0,.16);
}
.login-logo{
    display:block;
    width:280px;
    max-width:100%;
    height:auto;
    margin:0 auto 12px;
}
.login-hint{font-size:13px}
.narrow{max-width:620px}
.portal-logo-img{
    display:block;
    width:330px;
    max-width:100%;
    height:auto;
}
.attachment-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
    margin-top:14px;
}
.attachment-card{
    display:block;
    padding:12px;
    border-radius:8px;
    border:1px solid var(--border);
    background:#0b0d10;
    transition:.2s ease;
}
.attachment-card:hover{
    border-color:rgba(245,196,0,.3);
    transform:translateY(-2px);
}
.attachment-card span{
    display:block;
    color:var(--muted);
    font-size:12px;
    margin-top:6px;
}
.doc-actions{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
}
.inline-form{
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px;
    margin-top:12px;
}
.customer-total{
    margin-bottom:14px;
}
.document-page{
    background:#e9eaed;
    color:#111;
}
.document-sheet{
    width:min(900px,calc(100% - 32px));
    margin:24px auto;
    padding:36px;
    background:#fff;
    border-radius:8px;
    box-shadow:0 24px 80px rgba(0,0,0,.18);
}
.document-sheet header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    border-bottom:3px solid var(--gold);
    padding-bottom:18px;
    margin-bottom:24px;
}
.document-sheet header img{
    width:260px;
    max-width:48%;
    background:#08090b;
    border-radius:8px;
    padding:10px;
}
.document-sheet h1,.document-sheet h2{color:#111}
.document-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}
.print-button{margin-top:24px}

@keyframes pageIn{
    from{opacity:0;transform:translateY(10px)}
    to{opacity:1;transform:translateY(0)}
}
@keyframes panelIn{
    from{opacity:0;transform:translateY(8px)}
    to{opacity:1;transform:translateY(0)}
}
@keyframes dropIn{
    from{opacity:0;transform:translateY(-6px)}
    to{opacity:1;transform:translateY(0)}
}

@media(max-width:1180px){
    .stats{grid-template-columns:repeat(3,1fr)}
    .two-col{grid-template-columns:340px 1fr}
}

@media(max-width:1050px){
    body{background-attachment:scroll}
    .sidebar{
        position:sticky;
        top:0;
        z-index:20;
        width:100%;
        height:auto;
        padding:12px 14px;
        border-right:0;
        border-bottom:1px solid var(--border);
    }
    .brand{
        display:flex;
        align-items:center;
        justify-content:center;
        padding:0 0 10px;
        margin-bottom:10px;
    }
    .brand-logo{width:190px;margin:0}
    .sidebar-note{display:none}
    nav{
        flex-direction:row;
        gap:8px;
        overflow-x:auto;
        padding-bottom:3px;
        scrollbar-width:none;
    }
    nav::-webkit-scrollbar{display:none}
    nav a{
        flex:0 0 auto;
        white-space:nowrap;
        padding:11px 13px;
    }
    nav a:hover{transform:none}
    .main{margin-left:0;padding:18px}
    .stats{
        display:flex;
        overflow-x:auto;
        gap:12px;
        padding-bottom:8px;
        scrollbar-width:thin;
    }
    .stat-card{
        flex:0 0 190px;
        min-height:112px;
    }
    .two-col,.detail-grid,.detail-layout,.dashboard-grid,.dashboard-grid.wide-left,.portal-grid{grid-template-columns:1fr}
    .kanban{
        display:flex;
        overflow-x:auto;
        padding-bottom:10px;
        scroll-snap-type:x proximity;
    }
    .kanban-col{
        flex:0 0 320px;
        min-height:520px;
        scroll-snap-align:start;
    }
    .panel-title{
        align-items:flex-start;
        flex-direction:column;
    }
    .search{width:100%;min-width:0}
    .collapse-toggle{min-height:68px}
    .portal-shell{padding-top:18px}
    .portal-hero{min-height:118px}
}

@media(max-width:620px){
    .main{padding:14px}
    .page-head{
        flex-direction:column;
        gap:12px;
    }
    .page-head h1{font-size:30px}
    .page-head .btn,
    .page-head form,
    .page-head button{width:100%}
    .panel{padding:16px}
    .collapsible-panel{padding:0}
    .collapse-toggle{
        align-items:flex-start;
        flex-direction:column;
    }
    .collapse-toggle em{
        width:100%;
    }
    .collapse-content{padding:0 16px 16px}
    .stat-card{flex-basis:165px}
    .stat-card strong{font-size:30px}
    .job-row{flex-direction:column}
    .badge-stack{align-items:flex-start}
    .portal-summary{grid-template-columns:1fr}
    .portal-progress{grid-template-columns:repeat(2,1fr)}
    .chart-row{grid-template-columns:1fr 1fr 36px}
    .attachment-grid,.doc-actions,.document-grid,.inline-form{grid-template-columns:1fr}
    .portal-grid h1,.portal-result h2{font-size:32px}
    .portal-logo-img{width:260px}
    .portal-hero{
        flex-direction:column;
        min-height:0;
        margin-bottom:16px;
    }
    .portal-progress div{min-height:84px}
    .document-sheet{
        width:100%;
        margin:0;
        padding:20px;
        border-radius:0;
    }
    .document-sheet header{
        align-items:flex-start;
        flex-direction:column;
    }
    .document-sheet header img{
        max-width:100%;
        width:240px;
    }
}

@media(max-width:420px){
    .brand-logo{width:165px}
    nav a{font-size:13px;padding:10px 11px}
    .stats{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px}
    .kanban{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px}
    .kanban-col{flex-basis:290px}
    .portal-progress{grid-template-columns:1fr}
    .btn{width:100%}
    .job-row .btn{width:auto}
}

@media print{
    .print-button{display:none}
    .document-page{background:#fff}
    .document-sheet{box-shadow:none;margin:0;width:100%;border-radius:0}
}