/* Render3D shared CSS — brand palette carried over from Merciglobal's aiflow app. */
:root{
  --bg:#15140f; --bg2:#1c1a13; --card:#211e16; --card2:#2a2519;
  --line:#3a3527; --txt:#f0ece2; --muted:#b6ad97; --muted2:#857c66;
  --accent:#e2761b; --accent2:#f5c645; --accent-soft:#3a2a14;
  --ok:#22c55e; --warn:#f59e0b; --bad:#ef4444; --ink:#0d0d0d;
  --radius:16px; --shadow:0 8px 30px rgba(0,0,0,.38);
  --shadow-sm:0 1px 2px rgba(0,0,0,.30); --ring:0 0 0 3px rgba(226,118,27,.22);
  --header-bg:rgba(21,20,15,.9);
  --warn-bg:rgba(245,158,11,.16); --warn-txt:#fbbf24;
}
:root[data-theme="light"]{
  --bg:#faf7f1; --bg2:#ffffff; --card:#ffffff; --card2:#f7f3ea;
  --line:#ece6d8; --txt:#26221a; --muted:#6b6353; --muted2:#9a9180;
  --accent:#c2620e; --accent2:#a8520a; --accent-soft:#fdecd2;
  --ok:#16a34a; --warn:#b45309; --bad:#dc2626; --ink:#0d0d0d;
  --shadow:0 8px 24px rgba(30,27,20,.10);
  --shadow-sm:0 1px 2px rgba(30,27,20,.05); --ring:0 0 0 3px rgba(194,98,14,.16);
  --header-bg:rgba(255,255,255,.92);
  --warn-bg:#fef3c7; --warn-txt:#92400e;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--txt);font-family:'Inter',system-ui,Segoe UI,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.55;font-size:15px}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
a:focus-visible,button:focus-visible{outline-offset:3px;border-radius:6px}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0 0 .4em;line-height:1.2;font-weight:800;letter-spacing:-.01em}
p{margin:0 0 1em}
.container{max-width:1140px;margin:0 auto;padding:0 20px}
.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;border:1px solid transparent;cursor:pointer;
  font-weight:700;font-size:14px;padding:11px 20px;border-radius:11px;text-align:center;line-height:1;
  transition:transform .12s ease,filter .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.6;cursor:progress;filter:none;transform:none}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(226,118,27,.26)}
.btn-primary:hover{filter:brightness(1.07);box-shadow:0 5px 16px rgba(226,118,27,.34)}
.btn-ghost{background:var(--bg2);color:var(--txt);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--accent2);color:var(--accent2)}
.btn-soft{background:var(--accent-soft);color:var(--accent2)}
.btn-soft:hover{filter:brightness(1.04)}
.btn-danger{background:var(--bad);color:#fff;box-shadow:0 2px 8px rgba(220,38,38,.24)}
.btn-danger:hover{filter:brightness(1.06)}
.btn-block{width:100%}
.btn-sm{padding:8px 13px;font-size:13px;border-radius:9px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.muted{color:var(--muted)}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px}
.tag-ok{background:rgba(34,197,94,.14);color:#4ade80}
.tag-warn{background:rgba(245,158,11,.16);color:#fbbf24}
.tag-bad{background:rgba(239,68,68,.15);color:#f87171}
.tag-accent{background:var(--accent-soft);color:var(--accent2)}
label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin:0 0 6px}
.input,select,textarea{width:100%;background:var(--bg2);border:1px solid var(--line);color:var(--txt);
  border-radius:10px;padding:9px 12px;font-size:14px;font-family:inherit;outline:none;
  transition:border-color .15s ease,box-shadow .15s ease}
.input:hover,select:hover,textarea:hover{border-color:var(--muted2)}
.input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:var(--ring)}
.input::placeholder,textarea::placeholder{color:var(--muted2)}
textarea{resize:vertical;min-height:80px}
.field{margin-bottom:12px}
.field label{font-size:13px}
@media(max-width:760px){.input,select,textarea{font-size:16px}}
.flash{padding:12px 16px;border-radius:12px;margin-bottom:14px;font-size:14px;font-weight:600;
  white-space:pre-line;line-height:1.55;overflow-wrap:anywhere}
.flash-info{background:var(--accent-soft);color:var(--accent2)}
.flash-success{background:rgba(34,197,94,.14);color:#4ade80}
.flash-error{background:rgba(239,68,68,.15);color:#f87171}
table.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th,.tbl td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl th{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.tbl tbody tr:hover{background:var(--card2)}
.auth-wrap{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.auth-side{background:linear-gradient(160deg,#3a2a14,#15140f);padding:56px 48px;display:flex;flex-direction:column;justify-content:center}
.auth-main{display:flex;align-items:center;justify-content:center;padding:40px 24px}
.auth-box{width:100%;max-width:400px}
.brand{font-weight:900;font-size:22px;letter-spacing:-.02em}
.brand .dot{color:var(--accent2)}
.modal-back{position:fixed;inset:0;background:rgba(5,5,10,.78);backdrop-filter:blur(4px);z-index:60;
  display:none;align-items:flex-start;justify-content:center;padding:40px 16px;overflow:auto}
.modal-back.open{display:flex}
.modal-back.busy{cursor:progress}
.modal-back.busy [data-close]{opacity:.4;pointer-events:none;cursor:progress}
.modal{background:var(--bg2);border:1px solid var(--line);border-radius:18px;max-width:720px;width:100%;
  box-shadow:var(--shadow);animation:zoomin .22s ease}
@keyframes zoomin{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
.tip{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent2);font-size:11px;font-weight:800;cursor:help;vertical-align:middle}
.help-box{background:var(--accent-soft);border:1px dashed #5a4416;border-radius:10px;padding:11px 14px;
  font-size:13px;color:var(--accent2);margin-bottom:16px;display:flex;gap:9px;align-items:flex-start}
@media (max-width:760px){ .auth-wrap{grid-template-columns:1fr} .auth-side{display:none} }
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
.topbar{background:var(--header-bg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.flash-warn{background:var(--warn-bg);color:var(--warn-txt)}

/* ===== App shell ===== */
.app-shell{min-height:100vh}
#sidebar{position:fixed;top:0;left:0;height:100vh;width:240px;z-index:40;
  display:flex;flex-direction:column;overflow:hidden;
  border-radius:0;border-top:0;border-bottom:0;border-left:0;transition:width .18s ease}
#sidebar nav{overflow-y:auto;overflow-x:hidden}
#mainCol{margin-left:240px;min-width:0;min-height:100vh;display:flex;flex-direction:column;transition:margin-left .18s ease}
#sidebar.mini{width:64px}
#sidebar.mini ~ #mainCol{margin-left:64px}
#sidebar.mini .sb-full{display:none!important}
#sidebar.mini .sb-mini{display:inline!important}
#sidebar.mini nav a{justify-content:center}
#sidebar.mini:hover{width:240px;z-index:60;box-shadow:var(--shadow)}
#sidebar.mini:hover .sb-full{display:inline!important}
#sidebar.mini:hover .sb-mini{display:none!important}
#sidebar.mini:hover nav a{justify-content:flex-start}
@media(max-width:720px){
  #mainCol{margin-left:0!important}
  #sidebar{width:240px!important;transform:translateX(-100%)}
  #sidebar.mini{width:240px!important}
  #sidebar.mini:hover{box-shadow:none}
  #sidebar.mini .sb-full,#sidebar.mini:hover .sb-full{display:inline!important}
  #sidebar.mini .sb-mini,#sidebar.mini:hover .sb-mini{display:none!important}
  #sidebar.mini nav a,#sidebar.mini:hover nav a{justify-content:flex-start!important}
  #sidebar.open{transform:none;box-shadow:var(--shadow);z-index:70}
}
.opt-check{display:flex;align-items:flex-start;gap:9px;cursor:pointer;font-size:13px;padding:11px 13px;border:1px solid var(--line);border-radius:11px;background:var(--bg2);margin-top:11px;transition:border-color .15s ease,background .15s ease}
.opt-check:hover{border-color:var(--accent2)}
.opt-check input{accent-color:var(--accent);width:16px;height:16px;margin-top:1px;flex-shrink:0}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:10px;border:1px solid var(--line);background:var(--bg2);color:var(--txt);cursor:pointer;
  font-size:16px;line-height:1;transition:.15s}
.theme-toggle:hover{border-color:var(--accent2)}
:root[data-theme="light"] .tag-ok{background:#dcfce7;color:#15803d}
:root[data-theme="light"] .tag-warn{background:#fef3c7;color:#92400e}
:root[data-theme="light"] .tag-bad{background:#fee2e2;color:#b91c1c}
:root[data-theme="light"] .flash-success{background:#dcfce7;color:#15803d}
:root[data-theme="light"] .flash-error{background:#fee2e2;color:#b91c1c}
:root[data-theme="light"] .flash-info{background:#fdecd2;color:#a8520a}
:root[data-theme="light"] .help-box{border-color:#eccb8f}

.card-hover{transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}
.card-hover:hover{transform:translateY(-2px);border-color:var(--accent2);box-shadow:var(--shadow)}
.dash-greet{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.dash-greet h1{font-size:22px;font-weight:800;margin:0;letter-spacing:-.01em}
.dash-greet .sub{color:var(--muted);font-size:13px;margin-top:3px}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:18px}
.stat{padding:16px 18px;display:flex;align-items:center;gap:13px}
.stat .ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.stat .lbl{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.01em}
.stat .val{font-size:26px;font-weight:900;line-height:1.05;margin-top:3px;color:var(--txt)}
.qa-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:18px}
.qa{display:flex;align-items:center;gap:11px;padding:14px 16px;font-weight:700;font-size:14px;color:var(--txt)}
.qa .ic{width:34px;height:34px;border-radius:9px;background:var(--accent-soft);color:var(--accent2);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.qa .ar{margin-left:auto;color:var(--muted2)}
.sec-h{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.sec-h h2{font-size:16px;margin:0;font-weight:800}
.dash-2col{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:18px;align-items:start}
@media(max-width:820px){.dash-2col{grid-template-columns:minmax(0,1fr)}}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.grid2{grid-template-columns:1fr}}
html,body{max-width:100%;overflow-x:clip}
img,svg,video,canvas{max-width:100%;height:auto}
.tbl td,.muted,p,td,.card{overflow-wrap:anywhere}
@media(max-width:600px){
  [style*="grid-template-columns"]{grid-template-columns:1fr!important}
  .modal,.card{border-radius:12px}
  .container{padding:0 14px}
}
@media(max-width:820px){
  [style*="grid-template-columns:340px"],[style*="grid-template-columns:320px"]{grid-template-columns:1fr!important}
}

/* ===== Render3D-specific ===== */
.dropzone{border:2px dashed var(--line);border-radius:14px;padding:34px 20px;text-align:center;cursor:pointer;
  background:var(--bg2);transition:border-color .15s ease,background .15s ease}
.dropzone:hover,.dropzone.drag{border-color:var(--accent2);background:var(--accent-soft)}
.dropzone .dz-ic{font-size:34px;margin-bottom:8px}
.photo-strip{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.photo-strip .ph{position:relative;width:84px;height:84px;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.photo-strip .ph img{width:100%;height:100%;object-fit:cover}
.photo-strip .ph .rm{position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:999px;background:rgba(0,0,0,.6);
  color:#fff;border:0;cursor:pointer;font-size:12px;line-height:1}
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.lib-card{overflow:hidden;cursor:pointer}
.lib-card .thumb{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--bg2)}
.lib-card .meta{padding:10px 12px}
.lib-card .meta .nm{font-weight:700;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lib-card .meta .sub{font-size:11px;color:var(--muted)}
.viewer-wrap{position:relative;background:#000;border-radius:14px;overflow:hidden;height:60vh;min-height:360px}
.viewer-wrap canvas{display:block;width:100%;height:100%}
/* A normal in-flow row ABOVE the canvas, not an overlay on top of it — an absolutely
   positioned, semi-transparent toolbar stacked over the live WebGL canvas was found (via
   headless cross-browser testing) to corrupt the canvas's own compositing in some
   browsers/GPUs, leaving part of it unpainted. Keeping the toolbar out of the canvas's
   stacking context avoids that whole class of bug. */
.viewer-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.viewer-toolbar .btn{background:var(--bg2);color:var(--txt);border-color:var(--line)}
.viewer-toolbar .btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.marker-dot{position:absolute;width:22px;height:22px;border-radius:999px;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;transform:translate(-50%,-50%);
  cursor:pointer;box-shadow:0 0 0 3px rgba(226,118,27,.35);z-index:6}
.part-box{position:absolute;border:2px solid var(--accent2);background:rgba(245,198,69,.12);cursor:pointer;border-radius:4px}
.part-box .lbl{position:absolute;top:-22px;left:0;background:var(--accent2);color:#1c1a13;font-size:11px;font-weight:800;
  padding:2px 6px;border-radius:6px;white-space:nowrap}
.attr-row{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;margin-bottom:8px;align-items:center}
@media(max-width:560px){.attr-row{grid-template-columns:1fr}}
.role-pill{font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.03em}
.role-owner{background:rgba(226,118,27,.18);color:var(--accent2)}
.role-manager{background:rgba(34,197,94,.14);color:#4ade80}
.role-editor{background:rgba(59,130,246,.16);color:#60a5fa}
.role-viewer{background:rgba(148,163,184,.16);color:#94a3b8}