@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --paper:#f1ede3;
  --paper-deep:#e7decf;
  --card:#faf8f2;
  --ink:#1b2a45;
  --navy2:#233457;
  --amber:#d2892e;
  --amber-deep:#b06f1e;
  --steel:#66717f;
  --line:#dcd5c4;
  --rust:#b8503a;
  --moss:#4c7a5d;
  --sidebar:#1b2a45;
  --sidebar-muted:#8e9ab2;
  --shadow:0 24px 50px rgba(27,42,69,.08);
}

*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  font-family:"IBM Plex Sans","Segoe UI",Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at top right, rgba(210,137,46,.09), transparent 26%),
    linear-gradient(180deg, #f5f1e9 0%, var(--paper) 46%, var(--paper-deep) 100%);
}
a{color:inherit;text-decoration:none}

.app-shell{display:flex;min-height:100vh}
.sidebar{
  width:232px;
  background:var(--sidebar);
  color:#fff;
  padding:24px 16px;
  display:flex;
  flex-direction:column;
  flex-shrink:0;
}
.brand{
  padding:0 8px 20px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.brandmark{
  font-family:"Space Grotesk","Segoe UI",sans-serif;
  font-weight:700;
  font-size:24px;
  letter-spacing:.02em;
}
.brandmark span{color:var(--amber)}
.brandtext{
  margin-top:4px;
  color:var(--sidebar-muted);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-family:"IBM Plex Mono","Courier New",monospace;
  line-height:1.5;
}
.navmenu{display:flex;flex-direction:column;gap:4px;padding-top:18px}
.navlink{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px 10px 12px;
  border-left:3px solid transparent;
  border-radius:8px;
  color:#b8c2d6;
  font-size:13.5px;
  font-weight:600;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.navlink:hover{background:rgba(255,255,255,.05);color:#fff}
.navlink.active{
  background:var(--navy2);
  border-left-color:var(--amber);
  color:#fff;
}
.navindex{
  min-width:24px;
  color:#73829e;
  font-size:10.5px;
  font-family:"IBM Plex Mono","Courier New",monospace;
}
.navlink.active .navindex{color:#f4bf6f}
.sidepanel{
  margin-top:auto;
  padding:14px 12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  background:rgba(255,255,255,.04);
}
.sidepanel b{
  display:block;
  font-family:"Space Grotesk","Segoe UI",sans-serif;
  font-size:14px;
  margin-bottom:6px;
}
.sidepanel p{
  margin:0;
  font-size:12px;
  line-height:1.6;
  color:var(--sidebar-muted);
}

.mainpane{flex:1;min-width:0;padding:24px}
.wrap{width:100%;max-width:none;margin:0}
.wrap > *{min-width:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.workspace-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px}
.workspace-search{display:flex;gap:8px;flex:1;max-width:720px;min-width:0}
.workspace-search input{min-width:0;flex:1}
.account-menu{position:relative;flex-shrink:0}
.account-menu>summary{cursor:pointer;font-weight:600;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--card)}
.account-menu>summary span{font-size:11px;color:var(--steel);margin-left:8px;font-weight:400}
.account-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:50;width:300px;max-width:90vw;padding:18px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);display:grid;gap:14px}
.account-panel summary{cursor:pointer}.account-panel form{margin:0}
.share-strip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding:0 0 14px;margin-bottom:22px;font-size:12px}
.share-strip label{margin:0;font-size:12px}.share-strip input{width:235px!important;padding:5px 8px!important;font-size:12px;background:transparent!important;border-color:transparent!important}.share-strip small{color:var(--steel)}

.header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  margin-bottom:22px;
}
.header h1{
  margin:0;
  font-family:"Space Grotesk","Segoe UI",sans-serif;
  font-size:31px;
  font-weight:700;
  letter-spacing:-.03em;
}
.sub{
  margin-top:5px;
  color:var(--steel);
  font-size:13.5px;
  line-height:1.5;
}
.headerbadge,
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  font-size:11.5px;
  font-weight:600;
  white-space:nowrap;
  font-family:"IBM Plex Mono","Courier New",monospace;
}
.headerbadge{
  background:#efe4cd;
  color:var(--amber-deep);
  border:1px solid #e3cfab;
}

.grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.metric-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.two{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr);gap:18px}
.split-equal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.section{margin-top:20px}
.stack{display:flex;flex-direction:column;gap:16px}

.card{
  position:relative;
  overflow:hidden;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:18px;
  box-shadow:var(--shadow);
}
.card::before,
.card::after{
  content:"";
  position:absolute;
  width:9px;
  height:9px;
  opacity:.55;
  pointer-events:none;
}
.card::before{
  top:8px;
  left:8px;
  border-top:1.5px solid var(--amber);
  border-left:1.5px solid var(--amber);
}
.card::after{
  right:8px;
  bottom:8px;
  border-right:1.5px solid var(--amber);
  border-bottom:1.5px solid var(--amber);
}
.cardlink{
  display:block;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.cardlink:hover{
  transform:translateY(-3px);
  border-color:#d9ae62;
  box-shadow:0 28px 52px rgba(27,42,69,.12);
}
.linkhint{
  margin-top:10px;
  color:var(--amber-deep);
  font-size:11.5px;
  font-weight:600;
  font-family:"IBM Plex Mono","Courier New",monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.kpi-highlight{
  border-color:#d9ae62;
  box-shadow:0 0 0 3px rgba(210,137,46,.12),var(--shadow);
}

.kpi .l{
  color:var(--steel);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:11px;
  font-family:"IBM Plex Mono","Courier New",monospace;
}
.kpi .v{
  margin-top:6px;
  font-family:"Space Grotesk","Segoe UI",sans-serif;
  font-size:30px;
  font-weight:700;
  color:var(--ink);
}
.kpi .mini{
  margin-top:3px;
  color:var(--steel);
  font-size:12px;
  line-height:1.45;
}

.toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}
.toolbarwrap{flex-wrap:wrap}
.toolbaractions{display:flex;gap:8px;flex-wrap:wrap}

.card h2,
.card h3{
  margin:0;
  font-family:"Space Grotesk","Segoe UI",sans-serif;
  font-size:18px;
  font-weight:600;
  letter-spacing:-.02em;
}
.legend{
  margin-bottom:6px;
  color:var(--steel);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:10.5px;
  font-family:"IBM Plex Mono","Courier New",monospace;
}

.badge.ok{background:#eaf2ed;color:var(--moss)}
.badge.warn{background:#fbf0e0;color:var(--amber-deep)}
.badge.bad{background:#f8e9e5;color:var(--rust)}
.badge.info,
.badge.neutral{background:#eeeae0;color:var(--steel)}

.meta-strip{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

table{width:100%;border-collapse:collapse;font-size:13px}
th,td{
  padding:12px 10px;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:middle;
}
th{
  color:var(--steel);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:11px;
  font-family:"IBM Plex Mono","Courier New",monospace;
}
tbody tr:hover td{background:rgba(35,52,87,.03)}
tr:last-child td{border-bottom:0}
.tablewrap{overflow:auto}
.tablelink{
  display:inline-block;
  color:inherit;
  transition:color .15s ease;
}
.tablelink:hover{color:var(--amber-deep)}
.stronglink{
  font-weight:700;
  color:var(--amber-deep);
}

.progress{
  height:8px;
  min-width:100px;
  overflow:hidden;
  border-radius:999px;
  background:#ece4d5;
}
.progress span{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--amber),var(--amber-deep));
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:1px solid transparent;
  border-radius:7px;
  padding:10px 15px;
  background:var(--amber);
  color:#fff;
  cursor:pointer;
  font-size:13px;
  font-weight:600;
  font-family:"IBM Plex Sans","Segoe UI",sans-serif;
  transition:filter .15s ease,transform .15s ease;
}
.btn:hover{filter:brightness(.95);transform:translateY(-1px)}
.btn.secondary{
  background:transparent;
  color:var(--ink);
  border-color:var(--line);
}
.btn.badbtn{
  background:transparent;
  color:var(--rust);
  border-color:rgba(184,80,58,.3);
}

label{
  display:block;
  margin-bottom:6px;
  color:var(--steel);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:10.5px;
  font-weight:600;
  font-family:"IBM Plex Mono","Courier New",monospace;
}
input,select,textarea{
  width:100%;
  padding:10px 11px;
  border-radius:8px;
  border:1px solid var(--line);
  background:#fffdfa;
  color:var(--ink);
  outline:none;
  font:inherit;
}
input:focus,select:focus,textarea:focus{
  border-color:#d9ae62;
  box-shadow:0 0 0 3px rgba(210,137,46,.12);
}
textarea{min-height:88px}

.formgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.formgrid .wide{grid-column:span 2}
.importgrid{grid-template-columns:1.4fr .8fr}
.filtergrid{grid-template-columns:2fr 1fr 1fr 1fr}

.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.soft{
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px 13px;
  background:#f4efe6;
  color:var(--steel);
  font-size:12.5px;
  line-height:1.6;
}
.hintlist{
  display:grid;
  gap:8px;
  margin-top:14px;
  color:var(--steel);
  font-size:12px;
}
.hintlist code{
  padding:2px 5px;
  border-radius:6px;
  background:#efe8da;
  color:var(--ink);
  font-family:"IBM Plex Mono","Courier New",monospace;
}

.msg{
  margin-bottom:16px;
  border:1px solid #e3cfab;
  border-radius:10px;
  padding:12px 13px;
  background:#fbf0e0;
  color:var(--amber-deep);
}
.msg.okmsg{background:#eaf2ed;border-color:#cfe0d5;color:var(--moss)}
.msg.badmsg{background:#f8e9e5;border-color:#e6c4bc;color:var(--rust)}
.msg.infomsg{background:#eeeae0;border-color:#d8d1c3;color:var(--ink)}
.msg.warnmsg{background:#fbf0e0;border-color:#e3cfab;color:var(--amber-deep)}

.rule-list,
.note-list{
  display:grid;
  gap:10px;
}
.rule,
.note{
  border:1px dashed var(--line);
  border-radius:10px;
  padding:11px 12px;
  background:#fcfaf5;
}
.rule b,
.note b{
  display:block;
  margin-bottom:4px;
  font-size:13px;
}
.rule span,
.note span{
  color:var(--steel);
  font-size:12.5px;
  line-height:1.55;
}

.empty{
  padding:34px 20px;
  text-align:center;
  color:var(--steel);
}
.inventory-grid{
  display:grid;
  gap:12px;
}
.inventory-row{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fcfaf5;
}
.inventory-row b{display:block;margin-bottom:3px}
.inventory-row span{color:var(--steel);font-size:12.5px}

.right{text-align:right}
.fileinput{padding:9px 10px;background:#fffdfa}
.footer{
  margin:28px 0 16px;
  color:var(--steel);
  font-size:11px;
  text-align:center;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-family:"IBM Plex Mono","Courier New",monospace;
}

@media(max-width:1180px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .two,.split-equal{grid-template-columns:1fr}
}

@media(max-width:980px){
  .app-shell{display:block}
  .sidebar{
    width:auto;
    position:static;
    padding-bottom:18px;
  }
  .navmenu{flex-direction:row;flex-wrap:wrap}
  .navlink{flex:1 1 180px}
  .sidepanel{margin-top:18px}
  .mainpane{padding:20px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metric-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .formgrid,.importgrid,.filtergrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:640px){
  .mainpane{padding:16px}
  .header{align-items:flex-start;flex-direction:column}
  .grid,.metric-row,.formgrid,.importgrid,.filtergrid{grid-template-columns:1fr}
  .toolbaractions{width:100%}
  .toolbaractions a,.toolbaractions button{flex:1}
  th,td{padding:11px 8px}
}

/* Compact controls preserve the existing navy and amber visual language. */
.btn{padding:8px 13px;font-size:12px;min-height:34px;border-radius:8px;box-shadow:none}
.share-strip .btn{padding:5px 9px;min-height:28px;font-size:11px}
.card{box-shadow:0 5px 18px rgba(27,42,69,.04)}
.header h1{font-size:28px}.header{margin-bottom:18px}.headerbadge{font-size:10px}
.toolbar h2{font-size:18px}input,select{padding:9px 11px}
.navlink{padding:11px 12px}.sidebar{width:220px}
.tablewrap th{font-size:11px;letter-spacing:.02em}.tablewrap td{padding:10px 9px}
.tablewrap tbody tr:hover{background:rgba(210,137,46,.045)}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
@media(min-width:981px){.sidebar{position:sticky;top:0;height:100vh;overflow-y:auto}}
@media(max-width:980px){.sidebar{width:auto}.sidepanel{display:none}.workspace-bar{align-items:flex-start}.account-menu>summary span{display:none}}
@media(max-width:640px){.workspace-bar{flex-wrap:wrap}.workspace-search{max-width:none;flex-basis:100%}.account-menu{margin-left:auto}.share-strip small{display:none}.share-strip{gap:6px}.share-strip input{width:205px!important}.header h1{font-size:25px}.btn{min-height:38px}.account-panel{right:0}.tablewrap td{padding:9px 7px}}