/* --- UI Fit-to-screen patch (no page-level horizontal scrolling) --- */
/* Ensure the main grid never grows wider than the viewport */
.wrap { width: 100%; max-width: 100vw; min-width: 0; }

/* Grid/flex children should be allowed to shrink instead of forcing overflow */
.side, .main, .panel, .row, .subgrid, .toolbar { min-width: 0; }

/* Long text should wrap instead of expanding containers */
pre, code, .mono { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; max-width: 100%; }

/* Inputs/buttons shouldn't force layout wider than viewport */
input, select, textarea, button { max-width: 100%; }

/* Tables (if any) should not force page overflow; keep scrolling inside the table container */
table { max-width: 100%; }
.table-scroll { max-width: 100%; overflow-x: auto; }

/* If any container still overflows, clip it locally instead of at page level */
.side, .main { overflow-x: hidden; }

:root{ --bg:#e6f4ff; --text:#0a2a66; --primary:#0a3b8e; --border:#cfe0ff; --muted:#5b79a6; --ok:#15803d; --err:#b91c1c; --left-panel-width: clamp(200px,16vw,280px); }
html,body{height:100%;overflow-y:hidden}
body{margin:0;font-family:Segoe UI,Arial,sans-serif;color:var(--text);background:var(--bg);display:flex;flex-direction:column;height:100vh;overflow:hidden}

/* Preserve full-height layout after introducing #appShell wrapper */
#appShell{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
}

.auth-screen{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:var(--bg);
  z-index:10000;
}
.auth-screen.hidden{display:none}
.auth-active .auth-screen{display:flex}
.auth-active #appShell{display:none}
.auth-card{
  width:min(420px, 92vw);
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 16px 40px rgba(10,42,102,0.25);
  padding:20px;
}
.auth-brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}
.auth-logo{height:42px;width:auto}
.auth-brand-text{display:flex;flex-direction:column;gap:2px}
.auth-brand-title{font-size:18px;font-weight:800;color:var(--text)}
.auth-brand-subtitle{font-size:12px;color:var(--muted)}
.auth-title{font-size:20px;font-weight:800;margin-bottom:4px}
.auth-subtitle{font-size:12px;color:var(--muted);margin-bottom:14px}
.auth-mode-switch{display:flex;gap:8px;margin-bottom:12px}
.auth-mode-switch .btn{flex:1}
.auth-form{display:flex;flex-direction:column;gap:8px}
.auth-form.hidden{display:none}
.auth-form .btn{margin-top:6px}
.auth-error{min-height:18px;font-size:12px;color:var(--err)}
.auth-success{min-height:18px;font-size:12px;color:#16a34a}
.verify-screen{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:var(--bg);
  z-index:10001;
}
.verify-screen.visible{display:flex}

.top{display:flex;align-items:center;gap:12px;
  padding:8px 16px;border-bottom:1px solid var(--border);
  background: linear-gradient(var(--bg), #ffffff);
  position:sticky;top:0;z-index:5
}
.logo{height:40px;width:auto}
.brand{font-weight:800;font-size:20px;letter-spacing:.2px}
.badge{display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;background:#0a3b8e;color:#fff;padding:4px 10px;border-radius:999px}
.status{margin-left:auto;font-size:12px;color:var(--muted)}

/* --- Production-ready status indicator (Option 1: Ready dot) --- */
.status{display:flex;align-items:baseline;gap:8px}
.status-dot{
  display:inline-block;
  position:relative;
  top:1px;
}
.status-dot[hidden]{
  display:none !important;
}
.status-dot{width:8px;height:8px;border-radius:50%;background:#bbb;flex:0 0 auto}
.status-dot.ready{background:#4caf50}
.status-dot.error{background:#d32f2f}
.status-text{
  white-space: normal;
  max-width: 520px;
  word-break: break-all;
}


.wrap{display:grid;grid-template-columns:var(--left-panel-width) 0px minmax(0,1fr);flex:1;min-height:0;min-width:0}
.side{border-right:1px solid var(--border);background:#fff;display:flex;flex-direction:column;min-height:0;overflow:hidden;min-width:0}

/* --- Left panel resize handle --- */
.left-resize-handle{
  grid-column:2;
  grid-row:1;
  width:4px;
  margin-left:-2px;
  cursor:col-resize;
  background:transparent;
  z-index:9;
  position:relative;
  transition:background 0.15s ease;
}
.left-resize-handle::before{
  content:'';
  position:absolute;
  inset:-0 -4px;
  cursor:col-resize;
}
.left-resize-handle:hover,
.left-resize-handle.dragging{
  background:rgba(10,59,142,0.22);
}
body.left-resizing{
  cursor:col-resize !important;
  user-select:none !important;
}
body.left-resizing iframe{
  pointer-events:none !important;
}
.side.right{border-right:none;border-left:1px solid var(--border);}

.side .actions{display:flex;gap:6px;padding:8px;border-bottom:1px solid var(--border);flex-wrap:wrap;flex:0 0 auto}
.btn{padding:8px 10px;border:1px solid var(--primary);background:var(--primary);color:#fff;border-radius:8px;cursor:pointer}
.btn .btn-icon{margin-right:6px;line-height:1}
.btn .btn-icon:only-child{margin-right:0}
.btn.secondary{background:#fff;color:var(--primary)}
.btn.ok{background:var(--ok);border-color:var(--ok)}
.btn.danger{background:#b91c1c;border-color:#b91c1c}
.btn.small{padding:6px 8px;border-radius:8px;font-size:12px}
#addProject{
  background:#93c5fd;
  border-color:#60a5fa;
  color:#0a2a66;
}
.list{overflow:auto;min-height:0;flex:1}
.item{padding:10px 12px;border-bottom:1px solid var(--border);cursor:pointer;border-left:3px solid transparent}
.item:hover{background:#f9fbff}
.item.active{border-left-color:var(--primary)}
.item[draggable="true"]{cursor:grab}
.item[draggable="true"]:active{cursor:grabbing}
.item.dragging{opacity:0.5;cursor:grabbing}
.item.drag-over{border-top:2px solid var(--primary);background:#f0f7ff}
.item .t{font-weight:400;font-size:13px;display:flex;align-items:center}
.item .item-icon{
  width:24px;height:24px;
  display:inline-flex;align-items:center;justify-content:center;
  margin-right:10px;font-size:14px;flex:0 0 24px;
  color:inherit;background:transparent;border-radius:0;
}
.item .item-title{display:inline-block;transition:color 0.12s ease}
.item.active .item-title{color:var(--primary);font-weight:600}
.item:hover .item-title{color:var(--primary)}
.item .s{font-size:12px;color:var(--muted)}

/* --- Project tree: expand/collapse + board list --- */
.project-node{}
.expand-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  flex:0 0 18px;
  margin-right:4px;
  cursor:pointer;
  border-radius:4px;
  transition:background 0.12s ease;
}
.expand-toggle:hover{
  background:rgba(10,59,142,0.1);
}
.expand-chevron{
  transition:transform 0.2s ease;
  color:var(--muted);
}
.project-node.expanded > .item .expand-chevron{
  transform:rotate(90deg);
}
.board-list{
  display:none;
  flex-direction:column;
}
.project-node.expanded > .board-list{
  display:flex;
  border-bottom:1px solid var(--border);
  padding-bottom:4px;
  padding-top:2px;
  background:#fafcff;
}
.board-item{
  padding:6px 12px 6px 52px;
  font-size:12px;
  color:var(--text);
  cursor:pointer;
  transition:background 0.12s ease;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  border-left:3px solid transparent;
}
.board-item:hover{
  background:#f0f4ff;
  color:var(--primary);
}
.board-item.active{
  background:#e0eaff;
  color:var(--primary);
  font-weight:600;
  border-left-color:var(--primary);
}
.board-item.board-loading,
.board-item.board-empty{
  color:var(--muted);
  cursor:default;
  font-style:italic;
}

.main{padding:14px;overflow:auto;min-height:0;display:grid;gap:12px;min-width:0}
.card{background:#fff;border:1px solid var(--border);border-radius:12px}
.card .hd{padding:10px 12px;border-bottom:1px solid var(--border);font-weight:800;display:flex;align-items:center;gap:10px}
.card .bd{padding:10px 12px}
.row{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}
.field{display:flex;flex-direction:column;gap:6px;flex:1;min-width:160px}
.label{font-size:12px;color:var(--muted);font-weight:800}
.input,.select,.textarea{padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:#f7fbff}
.textarea{min-height:96px;height:96px;resize:vertical}
/* --- Project Brief height tweak --- */
#f_brief.textarea{min-height:120px;height:120px;}

.hint{font-size:12px;color:var(--muted)}
.toolbar{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.foot{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.log{font-size:12px;color:#0a2a66;white-space:pre-wrap}

table{width:100%;border-collapse:separate;border-spacing:0 6px}
th{font-size:12px;color:var(--muted);text-align:left}
td{background:#f7fbff;border:1px solid var(--border);padding:6px;vertical-align:top}
/* --- Objective title input: align to column width --- */
#objBody td:nth-child(2) .title {
 width: 100%;
 box-sizing: border-box;
}
/* --- General Requirements: compact statement textarea --- */
#reqBody td:nth-child(4) .st {
  width: 100%;
  box-sizing: border-box;

  min-height: 40px;
  height: 40px;
  resize: vertical;
}

tr td:first-child{border-top-left-radius:8px;border-bottom-left-radius:8px}
tr td:last-child{border-top-right-radius:8px;border-bottom-right-radius:8px}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:flex;gap:6px;align-items:center;background:#f7fbff;border:1px solid var(--border);padding:5px 8px;border-radius:999px}
.chip button{border:none;background:transparent;cursor:pointer;color:#b00;font-weight:900}
details{background:#fff;border:1px solid var(--border);border-radius:10px;padding:8px}
details > summary{cursor:pointer;font-weight:800;color:var(--primary)}
.subgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}


/* Ultrawide desktops: widen side panels a bit */
@media (min-width: 1600px){
  :root{ --left-panel-width: clamp(220px,15vw,300px); }
  .wrap{grid-template-columns:var(--left-panel-width) 0px minmax(0,1fr)}
}
@media (min-width: 1920px){
  :root{ --left-panel-width: clamp(240px,14vw,340px); }
  .wrap{grid-template-columns:var(--left-panel-width) 0px minmax(0,1fr)}
}
@media (max-width:1100px){ .subgrid{grid-template-columns:1fr} }

/* Reorder buttons */
#moveUpProject,#moveDownProject{width:38px;padding:0;font-size:18px;height:38px;display:inline-flex;align-items:center;justify-content:center}
.tag{font-size:12px;background:#eaf3ff;border:1px solid var(--border);padding:3px 8px;border-radius:999px}
  
/* --- Project Metadata: per-field fitted widths (scoped) --- */
#projectMetadataCard .row { gap: 12px; }
#projectMetadataCard .field { flex: 0 0 auto; }
#projectMetadataCard .field.pm-id     { width: 26ch; min-width: 22ch; }
#projectMetadataCard .field.pm-name   { width: 18ch; min-width: 14ch; }
#projectMetadataCard .field.pm-domain { width: 12ch; min-width: 10ch; }
#projectMetadataCard .field.pm-status { width: 14ch; min-width: 12ch; }
#projectMetadataCard .field.pm-type   { width: 14ch; min-width: 12ch; }
#projectMetadataCard .field.pm-lang   { width: 14ch; min-width: 12ch; }
#projectMetadataCard .field.pm-system { width: 12ch; min-width: 10ch; }
#projectMetadataCard input,
#projectMetadataCard select { width: 100%; }
/* --- End Project Metadata tuning --- */


.actions{display:flex;flex-direction:column;gap:8px}
.actions-row{display:flex;gap:8px;align-items:center}
.actions-row .btn{flex:1}
#moveUpProject,#moveDownProject{flex:0 0 38px}




/* --- Header (logo + tagline to the right) --- */
.top-left{
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
}
.top-left-head{
  display:flex;
  align-items:center;
  gap:12px;
}
.top-left .logo{flex:0 0 auto}
.logo-btn{
  border:none;
  background:transparent;
  padding:0;
  margin:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
}
.tagline-block{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.tagline-title{font-size:18px;line-height:1.2;font-weight:800;color:var(--text)}
.tagline-sub{font-size:12px;line-height:1.2;font-weight:600;color:var(--muted);margin-top:4px}



/* --- Layout responsiveness (desktop/laptop) --- */
@media (max-width: 1200px){
  :root{ --left-panel-width: clamp(220px, 28vw, 300px); }
  .wrap{
    grid-template-columns: var(--left-panel-width) 0px minmax(0, 1fr);
    grid-template-rows: 1fr auto;
  }
  .wrap > .side{grid-column:1;grid-row:1;}
  .wrap > .main{grid-column:3;grid-row:1;}
  .wrap > .side.right{
    grid-column:1 / -1;
    grid-row:2;
    border-left:none;
    border-top:1px solid var(--border);
  }
}

@media (max-width: 900px){
  :root{ --left-panel-width: 100%; }
  .wrap{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .wrap > .side{grid-column:1;grid-row:1;border-right:none;border-bottom:1px solid var(--border);}
  .wrap > .main{grid-column:1;grid-row:2;}
  .wrap > .side.right{grid-column:1;grid-row:3;border-top:1px solid var(--border);}
  .left-resize-handle{display:none}
}/* --- Override: internal horizontal scroll for all sections except Project Metadata --- */
html, body { overflow-x: hidden; } /* keep page-level no horizontal scroll */

.panel { overflow-x: auto; }        /* allow internal horizontal scroll where needed */
#projectMetadataCard.panel { overflow-x: hidden; } /* exception: keep metadata fitted/wrapped */

/* Prefer scrolling over wrapping for monospace/log/JSON areas */
pre, code, .mono { white-space: pre; overflow-wrap: normal; word-break: normal; }

/* Safety: allow panels to shrink inside grid without forcing page overflow */
.panel, .side, .main { min-width: 0; }

/* --- Left panel toggle (drawer-style collapse) --- */
.top-toggle-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:6px;
  width:100%;
}
.top-left-group{display:flex;align-items:center;gap:10px;width:100%}
@media (max-width: 900px){
  .top-toggle-row{
    flex-wrap:wrap;
    row-gap:8px;
  }
}

/* --- Left-panel chevron toggle (edge icon) --- */
.wrap{position:relative}
.left-panel-toggle{
  position:absolute;
  left:var(--left-panel-width);
  top:50%;
  transform:translate(-50%,-50%);
  z-index:12;
  width:28px;
  height:28px;
  border-radius:50%;
  border:1px solid var(--border);
  background:#fff;
  box-shadow:0 2px 8px rgba(10,42,102,0.12);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  color:var(--muted);
  transition:background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.left-panel-toggle:hover{
  background:#eaf3ff;
  color:var(--primary);
  box-shadow:0 3px 12px rgba(10,42,102,0.18);
}
.left-panel-toggle svg{
  transition:transform 0.25s ease;
}
body.left-collapsed .left-panel-toggle,
html.left-collapsed .left-panel-toggle{
  left:0;
  transform:translateY(-50%);
}
body.left-collapsed .left-panel-toggle svg,
html.left-collapsed .left-panel-toggle svg{
  transform:rotate(180deg);
}
@media (max-width: 900px){
  .left-panel-toggle{display:none}
}

.top-center{
  flex:1;
  display:flex;
  justify-content:center;
  align-items:center;
}
@media (max-width: 900px){
  .top-center{
    justify-content:flex-start;
  }
}
.top-toggle-row .top-toggle{margin-top:0}

body.left-collapsed .side.left,
html.left-collapsed .side.left{display:none}
body.left-collapsed .left-resize-handle,
html.left-collapsed .left-resize-handle{display:none}
body.left-collapsed .wrap,
html.left-collapsed .wrap{
  grid-template-columns: minmax(0,1fr);
}

/* Under the existing responsive breakpoints, collapse should still feel natural */
@media (max-width: 1200px){
  body.left-collapsed .wrap,
  html.left-collapsed .wrap{
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
  }
  body.left-collapsed .wrap > .main,
  html.left-collapsed .wrap > .main{grid-column:1;grid-row:1;}
  body.left-collapsed .wrap > .side.right,
  html.left-collapsed .wrap > .side.right{grid-column:1;grid-row:2;}
}

@media (max-width: 900px){
  body.left-collapsed .wrap,
  html.left-collapsed .wrap{grid-template-columns:1fr}
}

.top-left-stack{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.top-toggle{
  margin-top:0;
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}
.top-toggle .btn-icon{
  display:inline-flex;
  align-items:center;
  margin-right:0;
}
/* --- Header divider + compact Projects button --- */
.header-divider{
  width:100%;
  max-width:420px;
  height:1px;
  margin:6px 0 6px 0;
  background:linear-gradient(to right, var(--border), transparent);
}

.top-toggle{
  padding:6px 10px;
  font-size:13px;
  border-radius:8px;
  line-height:1.2;
}
/* --- Sticky Save Bar (TOP of main panel) --- */
.sticky-savebar{
  position: sticky;
  top: 0;                 /* sticks to top of the scrolling .main */
  z-index: 20;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 10px;
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(10,42,102,0.08);
}

.sticky-savebar .row{
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.sticky-savebar .hint{
  margin-right: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 55%;
}

@media (max-width: 900px){
  .sticky-savebar .hint{ max-width: 40%; }
}

  
/* --- Top header menu (right aligned) --- */
.top-right{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}
.top-right-row{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:10px;
}
.top-right-row.auth-row{
  width:100%;
  justify-content:flex-end;
  flex-wrap:nowrap;
}

/* --- User avatar + dropdown --- */
.user-avatar-wrap{
  position:relative;
  display:inline-flex;
}
.user-avatar{
  width:34px;
  height:34px;
  border-radius:50%;
  border:2px solid var(--primary);
  background:var(--primary);
  color:#fff;
  font-size:13px;
  font-weight:800;
  letter-spacing:.5px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
  transition:box-shadow 0.15s ease, opacity 0.15s ease;
}
.user-avatar:hover{
  box-shadow:0 0 0 3px rgba(10,59,142,0.18);
}
.user-dropdown{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  min-width:220px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 8px 24px rgba(10,42,102,0.16);
  padding:12px 14px;
  z-index:100;
}
.user-dropdown-email{
  font-size:13px;
  font-weight:700;
  color:var(--text);
  word-break:break-all;
}
.user-dropdown-role{
  font-size:11px;
  font-weight:600;
  color:var(--muted);
  margin-top:2px;
}
.user-dropdown-divider{
  height:1px;
  background:var(--border);
  margin:10px 0;
}
.user-dropdown-admin{
  display:flex;
  align-items:center;
  gap:6px;
  width:100%;
  padding:7px 8px;
  margin-bottom:4px;
  border:none;
  border-radius:8px;
  background:transparent;
  color:var(--text);
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:background 0.12s ease;
}
.user-dropdown-admin:hover{
  background:var(--bg-hover, #f0f4ff);
}
.user-dropdown-nav{
  display:flex;
  align-items:center;
  gap:6px;
  width:100%;
  padding:7px 8px;
  margin-bottom:2px;
  border:none;
  border-radius:8px;
  background:transparent;
  color:var(--text);
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:background 0.12s ease;
}
.user-dropdown-nav:hover{
  background:var(--bg-hover, #f0f4ff);
}
.user-dropdown-nav.active{
  background:#eaf3ff;
  color:var(--primary);
}
.user-dropdown-signout{
  display:flex;
  align-items:center;
  gap:6px;
  width:100%;
  padding:7px 8px;
  border:none;
  border-radius:8px;
  background:transparent;
  color:#b91c1c;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:background 0.12s ease;
}
.user-dropdown-signout:hover{
  background:#fef2f2;
}
.top-right-row.status-row{
  justify-content:flex-end;
}
.top-menu-select{
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:8px;
  background:#fff;
  color:var(--text);
  font-weight:800;
  font-size:13px;
  cursor:pointer;
}

/* --- Main view tabs (Project Canvas / Run Center) --- */
.view-tabs{
  display:inline-flex;
  align-items:stretch;
  flex-wrap:nowrap;
  border:1px solid var(--border);
  border-radius:10px;
  overflow-x:auto;
  overflow-y:hidden;
  background:#fff;
}
.view-tab{
  appearance:none;
  border:0;
  background:transparent;
  color:var(--text);
  font-weight:800;
  font-size:13px;
  padding:6px 12px;
  cursor:pointer;
  line-height:1.2;
  white-space:nowrap;
}
.view-tab + .view-tab{
  border-left:1px solid var(--border);
}
.view-tab[aria-selected="true"]{
  background:var(--primary);
  color:#fff;
}
.view-tab:focus{
  outline:2px solid rgba(106,169,255,.55);
  outline-offset:2px;
}

/* --- Storage location modal (theme-aligned) --- */
.storage-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(10,42,102,0.35);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
}
.storage-modal{
  background:#fff;
  color:var(--text);
  max-width:640px;
  width:92%;
  border-radius:12px;
  padding:16px;
  border:1px solid var(--border);
  box-shadow:0 12px 32px rgba(10,42,102,0.22);
}
.storage-modal,
.storage-modal *{
  box-sizing:border-box;
}
.storage-modal-title{
  font-size:16px;
  font-weight:800;
  margin-bottom:6px;
}
.storage-modal-subtitle{
  font-size:12px;
  color:var(--muted);
  margin-bottom:10px;
}
.storage-modal-input{
  width:100%;
  margin-bottom:10px;
  max-width:100%;
}
.storage-modal-list{
  max-height:220px;
  overflow:auto;
}
.storage-modal-list-title{
  font-size:12px;
  color:var(--muted);
  margin-bottom:6px;
}
.storage-modal-item{
  display:block;
  width:100%;
  text-align:left;
  padding:6px 8px;
  border:1px solid var(--border);
  border-radius:8px;
  background:#f7fbff;
  color:var(--text);
  cursor:pointer;
}
.storage-modal-item:hover{
  background:#eaf3ff;
}
.storage-modal-row{
  display:flex;
  align-items:center;
  gap:6px;
  margin:4px 0;
}
.storage-modal-remove{
  border:1px solid var(--border);
  background:#fff;
  color:#b91c1c;
  border-radius:8px;
  padding:2px 8px;
  cursor:pointer;
  font-size:16px;
  line-height:1;
  height:28px;
}
.storage-modal-remove:hover{
  background:#fdecec;
}
.storage-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:12px;
}

/* ===== User Guide Panel ===== */
.guide-toggle-btn{
  width:34px;
  height:34px;
  border-radius:50%;
  border:2px solid var(--primary);
  background:#fff;
  color:var(--primary);
  font-size:16px;
  font-weight:800;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  flex:0 0 34px;
  transition:background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.guide-toggle-btn:hover{
  background:var(--primary);
  color:#fff;
  box-shadow:0 0 0 3px rgba(10,59,142,0.18);
}
.guide-toggle-btn:focus-visible{
  outline:2px solid rgba(106,169,255,.55);
  outline-offset:2px;
}

.guide-panel{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  width:clamp(300px, 28vw, 440px);
  background:#fff;
  border-left:1px solid var(--border);
  box-shadow:-4px 0 24px rgba(10,42,102,0.12);
  z-index:200;
  display:flex;
  flex-direction:column;
  transform:translateX(100%);
  transition:transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.guide-panel[hidden]{
  display:flex;
  transform:translateX(100%);
  pointer-events:none;
}
.guide-panel.open{
  transform:translateX(0);
  pointer-events:auto;
}

.guide-backdrop{
  position:fixed;
  inset:0;
  background:rgba(10,42,102,0.18);
  z-index:199;
  opacity:0;
  transition:opacity 0.28s ease;
  pointer-events:none;
}
.guide-backdrop.open{
  opacity:1;
  pointer-events:auto;
}

.guide-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  flex:0 0 auto;
  background:linear-gradient(var(--bg), #fff);
}
.guide-title{
  margin:0;
  font-size:16px;
  font-weight:800;
  color:var(--text);
}
.guide-close-btn{
  width:28px;
  height:28px;
  border-radius:50%;
  border:1px solid var(--border);
  background:#fff;
  color:var(--muted);
  font-size:18px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  transition:background 0.12s ease, color 0.12s ease;
}
.guide-close-btn:hover{
  background:#eaf3ff;
  color:var(--primary);
}

.guide-nav{
  padding:10px 16px;
  border-bottom:1px solid var(--border);
  flex:0 0 auto;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.guide-nav-item{
  appearance:none;
  border:1px solid var(--border);
  border-radius:8px;
  background:#f7fbff;
  color:var(--text);
  font-size:12px;
  font-weight:600;
  padding:5px 10px;
  cursor:pointer;
  white-space:nowrap;
  transition:background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.guide-nav-item:hover{
  background:#eaf3ff;
  color:var(--primary);
  border-color:var(--primary);
}
.guide-nav-item.active{
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
}

.guide-body{
  flex:1;
  overflow-y:auto;
  padding:16px 20px 32px;
  min-height:0;
}

/* Guide content typography */
.guide-section h1{
  font-size:20px;
  font-weight:800;
  color:var(--text);
  margin:0 0 8px;
  line-height:1.3;
}
.guide-section h2{
  font-size:14px;
  font-weight:800;
  color:var(--primary);
  margin:20px 0 6px;
  text-transform:uppercase;
  letter-spacing:0.4px;
}
.guide-lead{
  font-size:13px;
  color:var(--muted);
  line-height:1.5;
  margin:0 0 12px;
}
.guide-section p{
  font-size:13px;
  line-height:1.6;
  margin:0 0 8px;
  color:var(--text);
}
.guide-section ul,
.guide-section ol{
  font-size:13px;
  line-height:1.6;
  margin:0 0 8px;
  padding-left:20px;
}
.guide-section li{
  margin-bottom:4px;
}
.guide-section dl{
  margin:0 0 8px;
}
.guide-section dt{
  font-size:13px;
  font-weight:700;
  color:var(--text);
  margin-top:8px;
}
.guide-section dd{
  font-size:13px;
  color:var(--muted);
  margin:2px 0 0 16px;
  line-height:1.5;
}
.guide-section kbd{
  display:inline-block;
  padding:2px 6px;
  font-size:11px;
  font-family:Consolas, monospace;
  background:#f0f4ff;
  border:1px solid var(--border);
  border-radius:4px;
  color:var(--text);
  box-shadow:0 1px 0 var(--border);
}
.guide-section code{
  font-size:12px;
  background:#f0f4ff;
  padding:1px 5px;
  border-radius:4px;
  color:var(--primary);
}
.guide-section a{
  color:var(--primary);
  text-decoration:underline;
}
.guide-section a:hover{
  text-decoration:none;
}

.guide-body .guide-loading{
  text-align:center;
  padding:32px 16px;
  color:var(--muted);
  font-size:13px;
}

/* Responsive: full-width panel on small screens */
@media (max-width: 900px){
  .guide-panel{
    width:100%;
  }
}
/* Hide backdrop on desktop (panel is narrow enough) */
@media (min-width: 901px){
  .guide-backdrop{ display:none; }
}