:root {
  --navy:#071427; --navy2:#0d2139; --panel:#102943; --panel2:#132f4d;
  --gold:#d2b06b; --gold2:#f0d89f; --cream:#f7f3eb; --text:#f8fafc; --muted:#aebbd0;
  --line:rgba(255,255,255,.11); --danger:#e07979; --success:#7dc59a; --shadow:0 20px 60px rgba(0,0,0,.28);
}
*{box-sizing:border-box} html,body{margin:0;min-height:100%;background:var(--navy);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{min-height:100vh;background:radial-gradient(circle at 10% 0%,#183a5f 0,transparent 30%),linear-gradient(145deg,#071427 0%,#091a2f 50%,#06101f 100%)}
button,input,textarea,select{font:inherit}.hidden{display:none!important}.muted{color:var(--muted)}.gold{color:var(--gold2)}
.shell{min-height:100vh}.topbar{height:78px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 34px;position:sticky;top:0;background:rgba(7,20,39,.92);backdrop-filter:blur(18px);z-index:30}
.brand{display:flex;align-items:center;gap:14px;letter-spacing:.08em}.brandmark{width:39px;height:39px;border:1px solid var(--gold);display:grid;place-items:center;border-radius:50%;font-family:Georgia,serif;color:var(--gold2);font-size:18px}.brandtext strong{display:block;font-family:Georgia,serif;font-size:18px;letter-spacing:.12em}.brandtext span{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.24em;margin-top:3px}
.top-actions{display:flex;align-items:center;gap:12px}.userpill{padding:8px 12px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:13px}.container{max-width:1280px;margin:0 auto;padding:38px 28px 70px}
.hero{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:28px}.eyebrow{text-transform:uppercase;letter-spacing:.22em;color:var(--gold);font-size:11px;font-weight:700}.hero h1,.project-head h1{font-family:Georgia,serif;font-weight:500;font-size:38px;margin:8px 0 8px}.hero p{color:var(--muted);margin:0;max-width:700px}
.btn{border:0;border-radius:10px;padding:11px 16px;font-weight:700;cursor:pointer;transition:.18s ease;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn:hover{transform:translateY(-1px)}.btn-primary{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#182031}.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line)}.btn-danger{background:rgba(224,121,121,.12);color:#f1b4b4;border:1px solid rgba(224,121,121,.3)}.btn-small{padding:8px 11px;font-size:12px}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.project-card,.panel,.design-card{background:linear-gradient(150deg,rgba(19,47,77,.88),rgba(12,31,53,.95));border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}.project-card{padding:20px;cursor:pointer;transition:.2s ease}.project-card:hover{border-color:rgba(210,176,107,.55);transform:translateY(-2px)}
.card-top{display:flex;justify-content:space-between;gap:12px}.project-card h3{font-family:Georgia,serif;font-weight:500;font-size:21px;margin:0 0 8px}.project-card .meta{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px;padding-top:17px;border-top:1px solid var(--line)}.meta-item span{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.1em}.meta-item strong{display:block;margin-top:5px;font-size:13px;font-weight:600}
.status{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(210,176,107,.35);color:var(--gold2);background:rgba(210,176,107,.08);border-radius:999px;padding:6px 9px;font-size:11px;white-space:nowrap}.status:before{content:"";width:6px;height:6px;background:var(--gold);border-radius:50%}
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}.login-card{width:min(440px,100%);background:rgba(13,33,57,.92);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:36px}.login-card .brand{justify-content:center;margin-bottom:30px}.login-card h1{text-align:center;font-family:Georgia,serif;font-size:30px;font-weight:500;margin:0 0 8px}.login-card>p{text-align:center;color:var(--muted);margin:0 0 28px}
.field{display:flex;flex-direction:column;gap:7px}.field label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-weight:700}.field input,.field textarea,.field select{width:100%;border:1px solid var(--line);background:#081a2e;color:var(--text);border-radius:10px;padding:11px 12px;outline:none}.field input:focus,.field textarea:focus,.field select:focus{border-color:rgba(210,176,107,.65);box-shadow:0 0 0 3px rgba(210,176,107,.08)}.field textarea{min-height:105px;resize:vertical}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.form-stack{display:flex;flex-direction:column;gap:15px}.span-2{grid-column:span 2}.helper{font-size:11px;color:var(--muted);margin-top:3px}
.modal-backdrop{position:fixed;inset:0;background:rgba(1,7,14,.76);z-index:50;display:grid;place-items:center;padding:20px;backdrop-filter:blur(8px)}.modal{width:min(860px,100%);max-height:90vh;overflow:auto;background:#0b2037;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:25px}.modal h2{font-family:Georgia,serif;font-weight:500;margin:0}.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.project-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:24px}.crumb{font-size:12px;color:var(--muted);cursor:pointer;display:inline-flex;gap:6px;margin-bottom:12px}.project-specs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.spec{border:1px solid var(--line);border-radius:12px;padding:13px;background:rgba(5,18,33,.35)}.spec span{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.1em}.spec strong{display:block;margin-top:5px;font-size:13px;white-space:pre-wrap}
.panel{padding:20px;margin-bottom:18px}.panel-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.panel-title h2{font-family:Georgia,serif;font-size:22px;font-weight:500;margin:0}.copy{white-space:pre-wrap;line-height:1.6;color:#dbe3ef}
.tracker{display:flex;align-items:flex-start;overflow-x:auto;padding:5px 0 8px}.track-step{min-width:120px;flex:1;position:relative;text-align:center;color:#6f8099;font-size:10px;text-transform:uppercase;letter-spacing:.06em;padding-top:25px}.track-step:before{content:"";position:absolute;top:5px;left:50%;width:12px;height:12px;border-radius:50%;background:#30435d;border:3px solid #102943;z-index:2}.track-step:after{content:"";position:absolute;top:10px;left:-50%;width:100%;height:2px;background:#30435d}.track-step:first-child:after{display:none}.track-step.active,.track-step.done{color:var(--gold2)}.track-step.active:before,.track-step.done:before{background:var(--gold)}.track-step.done:after,.track-step.active:after{background:var(--gold)}
.gallery-details{border:1px solid var(--line);border-radius:12px;overflow:hidden}.gallery-details summary{padding:14px 16px;cursor:pointer;font-weight:700;background:rgba(5,18,33,.3)}.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:14px}.gallery img{width:100%;aspect-ratio:1.25;object-fit:cover;border-radius:10px;border:1px solid var(--line);background:#051322;cursor:pointer}
.design-list{display:flex;flex-direction:column;gap:15px}.design-card{overflow:hidden}.design-summary{display:grid;grid-template-columns:155px 1fr auto;gap:18px;align-items:center;padding:16px;cursor:pointer}.design-summary.no-image{grid-template-columns:1fr auto}.thumb{width:155px;height:118px;border-radius:12px;object-fit:cover;background:#071427;border:1px solid var(--line)}.design-card h3{font-family:Georgia,serif;font-size:21px;font-weight:500;margin:0 0 8px}.design-meta{display:flex;gap:8px;flex-wrap:wrap}.chip{border:1px solid var(--line);border-radius:999px;padding:5px 8px;color:var(--muted);font-size:11px}.price{font-family:Georgia,serif;font-size:24px;color:var(--gold2);white-space:nowrap}.approved-ribbon{color:#b8e4c9;font-size:11px;text-transform:uppercase;letter-spacing:.13em;font-weight:800;margin-bottom:5px}.design-card.approved{border-color:rgba(125,197,154,.5);box-shadow:0 18px 55px rgba(51,115,78,.17)}
.design-detail{border-top:1px solid var(--line);padding:18px}.design-images{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(180px,.4fr);gap:12px}.main-image{width:100%;max-height:520px;object-fit:contain;background:#061525;border:1px solid var(--line);border-radius:12px}.side-thumbs{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:start}.side-thumbs img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:9px;border:1px solid var(--line);cursor:pointer}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}.diamond-table{width:100%;border-collapse:collapse;font-size:12px}.diamond-table th,.diamond-table td{text-align:left;padding:9px 7px;border-bottom:1px solid var(--line)}.diamond-table th{color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.08em}
.comments{display:flex;flex-direction:column;gap:9px;max-height:340px;overflow:auto;padding-right:4px}.comment{border:1px solid var(--line);background:rgba(5,18,33,.35);border-radius:10px;padding:10px 12px}.comment.admin{border-left:3px solid var(--gold)}.comment.customer{border-left:3px solid #6ba3d2}.comment-head{display:flex;justify-content:space-between;gap:8px;margin-bottom:5px;font-size:11px}.comment-head span:last-child{color:var(--muted)}.comment p{margin:0;white-space:pre-wrap;line-height:1.45;font-size:13px}.comment-form{display:flex;gap:8px;margin-top:10px}.comment-form textarea{flex:1;min-height:70px;border:1px solid var(--line);background:#081a2e;color:white;border-radius:10px;padding:10px;resize:vertical}
.diamond-row{display:grid;grid-template-columns:1fr .65fr .8fr .55fr 1fr 1fr auto;gap:8px;align-items:end;padding:10px;border:1px solid var(--line);border-radius:10px;background:rgba(5,18,33,.25)}.diamond-row .field label{font-size:9px}.icon-btn{width:35px;height:39px;border-radius:9px;border:1px solid var(--line);background:transparent;color:#f0a2a2;cursor:pointer}.empty{padding:46px 20px;text-align:center;border:1px dashed var(--line);border-radius:14px;color:var(--muted)}.toast{position:fixed;right:22px;bottom:22px;z-index:100;background:#f8f1df;color:#152033;padding:12px 15px;border-radius:10px;box-shadow:var(--shadow);font-weight:700;font-size:13px;opacity:0;transform:translateY(12px);pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:none}.error{color:#f1b4b4;font-size:12px;margin-top:8px}.loading{min-height:40vh;display:grid;place-items:center;color:var(--muted)}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:80;display:grid;place-items:center;padding:25px;cursor:zoom-out}.lightbox img{max-width:95vw;max-height:92vh;object-fit:contain}
@media(max-width:950px){.grid{grid-template-columns:repeat(2,1fr)}.project-specs{grid-template-columns:repeat(2,1fr)}.diamond-row{grid-template-columns:1fr 1fr}.diamond-row .icon-btn{grid-column:2;justify-self:end}.detail-grid{grid-template-columns:1fr}.design-images{grid-template-columns:1fr}.side-thumbs{grid-template-columns:repeat(4,1fr)}}
@media(max-width:650px){.topbar{padding:0 16px}.brandtext span{display:none}.container{padding:26px 15px 55px}.hero,.project-head{align-items:flex-start;flex-direction:column}.hero h1,.project-head h1{font-size:31px}.grid{grid-template-columns:1fr}.form-grid,.project-specs{grid-template-columns:1fr}.span-2{grid-column:span 1}.design-summary{grid-template-columns:90px 1fr}.design-summary .price{grid-column:2;font-size:20px}.thumb{width:90px;height:90px}.gallery{grid-template-columns:repeat(2,1fr)}.userpill{display:none}.modal{padding:18px}}