:root{
  font-family:'Satoshi',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:#30352f;
  background:#f8f7f3;
  --paper:#f8f7f3;
  --muted:#74796f;
  --line:#dddfd5;
  --accent:#4b6048
}
*{
  box-sizing:border-box
}
html,body{
  height:100%;
  overflow:hidden
}
body{
  margin:0
}
button,input,textarea{
  font:inherit
}
button{
  cursor:pointer
}
button:disabled{
  opacity:.55;
  cursor:default
}
[hidden]{
  display:none!important
}
button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:4px
}
.ti{
  font-style:normal;
  line-height:1;
  flex-shrink:0
}
.app{
  display:grid;
  grid-template-columns:272px minmax(0,1fr);
  height:100dvh;
  overflow:hidden
}
.sidebar{
  background:#eeeee7;
  border-right:1px solid var(--line);
  padding:32px 22px 22px;
  display:flex;
  flex-direction:column;
  min-height:0
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 7px 38px
}
.logo{
  width:27px;
  height:34px;
  color:var(--accent);
  display:grid;
  place-items:center
}
.logo .ti{
  font-size:29px
}
.brand strong{
  font-size:31px;
  font-weight:700;
  letter-spacing:-.07em;
  line-height:1
}
.brand-period{
  color:#7b876d
}
.brand small{
  display:block;
  font-size:11px;
  color:var(--muted);
  margin-top:7px
}
.workspace-label{
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#626b5d;
  font-size:11px;
  font-weight:700;
  letter-spacing:.05em;
  margin:0 8px 12px
}
.workspace-label:first-of-type{
  font-size:9px;
  letter-spacing:.13em;
  color:#818578
}
.side-link{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid #d9dfd1;
  background:#e1e7da;
  color:#3f543a;
  border-radius:5px;
  padding:11px 12px;
  width:100%;
  text-align:left;
  font-size:12px;
  font-weight:700
}
.playground-nav{display:flex;align-items:center;margin-top:8px;text-decoration:none;
  background:transparent;color:#586450;border-color:transparent;font-weight:600}
.playground-nav:hover{background:#e4e8de;border-color:#d9dfd1}
.playground-nav .ti:last-child{margin-left:auto}
.side-link .ti{
  font-size:17px
}
.nav-indicator{
  margin-left:auto;
  width:5px;
  height:5px;
  background:#718367;
  border-radius:50%
}
.divider-top{
  border-top:1px solid var(--line);
  margin-top:28px;
  padding-top:21px
}
.workspace-label button,.icon-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:0;
  color:var(--muted);
  width:28px;
  height:28px;
  border-radius:4px;
  padding:0;
  font-size:17px
}
.workspace-label button:hover,.icon-button:hover{
  color:#30352f;
  background:#e1e3da
}
.search-field{
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 10px;
  border:1px solid #d6d9ce;
  border-radius:4px;
  color:#818879;
  background:#f4f4ee
}
.search-field .ti{
  font-size:15px
}
.filter{
  width:100%;
  min-width:0;
  background:transparent;
  border:0;
  color:#30352f;
  padding:9px 0;
  font-size:11px;
  outline:none
}
.search-field:focus-within{
  border-color:var(--accent)
}
.filter::placeholder{
  color:#818578
}
.list-scroll{
  overflow:auto;
  min-height:25px;
  max-height:25vh;
  margin-top:12px
}
.list-scroll.tasks{
  max-height:23vh
}
.note-row,.new-link{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  border:0;
  background:transparent;
  color:#626b5c;
  padding:9px 8px;
  text-align:left;
  border-radius:4px;
  font-size:11px
}
.note-row{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis
}
.note-row .ti{
  margin-right:8px;
  font-size:15px;
  color:#929b86
}
.note-row:hover,.new-link:hover{
  background:#e1e4d9;
  color:#30352f
}
.new-link{
  margin-top:5px;
  color:var(--accent)
}
.new-link .ti{
  font-size:15px
}
.muted{
  color:var(--muted);
  font-size:11px;
  padding:0 8px
}
.task-row{
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:11px;
  line-height:1.65;
  color:#596251;
  margin:9px 8px;
  overflow-wrap:anywhere
}
.task-row input{
  accent-color:var(--accent);
  width:13px;
  height:13px;
  margin:3px 0 0;
  flex-shrink:0;
  cursor:pointer
}
.task-row.done span{
  text-decoration:line-through;
  color:#93998b
}
.sidebar-bottom{
  margin-top:auto;
  padding:25px 8px 0
}
.vault-location{
  border-top:1px solid var(--line);
  padding-top:18px;
  display:flex;
  gap:9px;
  color:#626c59;
  font-size:11px
}
.vault-location .ti{
  font-size:17px
}
.vault-location small{
  display:block;
  color:#8a9082;
  font-size:10px;
  margin-top:5px
}
.connection{
  display:flex;
  align-items:center;
  gap:7px;
  color:#7c8373;
  font-size:10px;
  margin-top:19px
}
.status-dot,.engine-dot{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#b58c49;
  flex-shrink:0
}
.status-dot.ready{
  background:#73866b
}
.engine-dot{
  background:#8b9285
}
.main{
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  overflow:hidden
}
.topbar{
  flex:0 0 75px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid #e6e7df;
  padding:0 42px;
  gap:16px
}
.page-location{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0
}
.breadcrumbs{
  color:#8a8e82;
  font-size:11px;
  white-space:nowrap
}
.breadcrumbs span{
  color:#b8bdb0;
  margin:0 13px
}
.breadcrumbs b{
  color:#58614f;
  font-weight:500
}
.engine-toggle{
  display:flex;
  align-items:center;
  gap:8px;
  border:0;
  background:transparent;
  color:#737b68;
  padding:8px 0 8px 8px;
  min-width:0
}
.engine-toggle:hover{
  color:#30352f
}
.engine-toggle .ti{
  font-size:12px
}
.model-chip{
  font-size:10px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:230px
}
.chat-frame{
  flex:1 1 0;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden
}
.messages{
  flex:1 1 0;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  display:flex;
  flex-direction:column;
  gap:32px;
  padding:45px max(36px,calc((100% - 700px)/2))
}
.welcome{
  margin:auto 0;
  padding:24px 0 36px
}
.eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  color:#818b73;
  font-size:9px;
  letter-spacing:.14em;
  font-weight:700
}
.welcome-rule{
  width:22px;
  height:1px;
  background:#899779
}
.welcome h1{
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(35px,3.5vw,53px);
  font-weight:400;
  letter-spacing:-.045em;
  line-height:1.13;
  margin:24px 0 20px;
  color:#35432f
}
.welcome p{
  font-size:13px;
  color:#8a8f81;
  line-height:1.8;
  margin:0 0 34px
}
.suggestions{
  border-top:1px solid var(--line);
  max-width:530px
}
.suggestion{
  display:flex;
  align-items:center;
  gap:18px;
  width:100%;
  text-align:left;
  border:0;
  border-bottom:1px solid var(--line);
  background:transparent;
  color:#536047;
  padding:16px 2px
}
.suggestion-number{
  font-size:9px;
  font-family:monospace;
  color:#9ca490
}
.suggestion strong{
  display:block;
  font-size:12px;
  font-weight:500
}
.suggestion small{
  display:block;
  font-size:10px;
  color:#919887;
  margin-top:4px
}
.suggestion .ti{
  margin-left:auto;
  color:#8b987f;
  font-size:17px
}
.suggestion:hover{
  background:#eeefe7
}
.suggestion:hover .ti{
  color:var(--accent);
  transform:translate(2px,-2px)
}
.message{
  display:flex;
  gap:15px;
  width:100%
}
.avatar{
  display:grid;
  place-items:center;
  width:29px;
  height:29px;
  flex-shrink:0;
  color:var(--accent);
  background:#e6eadd;
  border:1px solid #dce2d3;
  border-radius:4px;
  font-family:Georgia,serif;
  font-size:18px
}
.message.user .avatar{
  background:transparent;
  color:#87907d;
  border-color:#dedfd7;
  font-family:inherit;
  font-size:8px
}
.bubble{
  padding:2px 0;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  line-height:1.85;
  font-size:13px;
  min-width:0;
  flex:1
}
.message.user .bubble{
  color:#737c68
}
.action-summary{
  margin-top:14px;
  padding:9px 0;
  border-top:1px solid var(--line);
  color:#8a9380;
  font-size:10px;
  white-space:normal
}
.composer-area{
  flex:0 0 auto;
  width:100%;
  max-width:788px;
  margin:0 auto;
  padding:12px 36px 24px;
  max-height:58%;
  overflow-y:auto;
  overscroll-behavior:contain
}
.composer{
  border:1px solid #cfd5c6;
  background:#fdfdf9;
  border-radius:7px;
  box-shadow:0 3px 10px #34402706
}
.composer:focus-within{
  border-color:#8d9b7e
}
.composer textarea{
  display:block;
  width:100%;
  height:72px;
  min-height:72px;
  max-height:min(220px,28dvh);
  border:0;
  background:transparent;
  color:#30352f;
  outline:0;
  resize:none;
  padding:19px 20px 8px;
  font-size:13px;
  line-height:1.5;
  overflow-y:auto;
  overscroll-behavior:contain
}
.composer textarea::placeholder{
  color:#929b87
}
.composer-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:5px 12px 12px 20px;
  color:#a0a793;
  font-size:9px
}
.composer-footer>span{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis
}
.composer-footer>span .ti{
  margin-right:4px;
  font-size:13px;
  vertical-align:-.13em
}
.send,.primary{
  border:0;
  border-radius:4px;
  background:var(--accent);
  color:#fcfdf9;
  padding:10px 15px;
  font-size:11px;
  font-weight:500;
  flex-shrink:0
}
.send:hover,.primary:hover{
  background:#364b32
}
.send .ti{
  font-size:15px;
  margin-left:9px;
  vertical-align:-.14em
}
.stop-send{
  background:#64695f
}
.disclaimer{
  margin:13px 0 0;
  color:#9aa28d;
  font-size:9px;
  text-align:center;
  line-height:1.65;
  padding-bottom:env(safe-area-inset-bottom,0px)
}
#errorBox{
  border:1px solid #d5b4a9;
  background:#f9eee7;
  color:#92523c;
  border-radius:4px;
  padding:12px;
  margin-bottom:10px;
  font-size:12px;
  max-height:84px;
  overflow-y:auto
}
.details{
  position:fixed;
  inset:65px 22px auto auto;
  width:min(340px,calc(100vw - 30px));
  max-height:calc(100dvh - 85px);
  overflow:auto;
  margin:0;
  padding:22px;
  border:1px solid #d0d5c7;
  border-radius:6px;
  background:#f8f9f2;
  color:#30352f;
  box-shadow:0 12px 35px #323d3020
}
.detail-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-family:Georgia,serif;
  font-size:20px;
  margin-bottom:8px
}
.system-card{
  border-bottom:1px solid var(--line);
  padding:18px 0
}
.system-label{
  color:#8b957f;
  font-size:9px;
  letter-spacing:.08em
}
.system-title{
  color:#4e6044;
  font-size:14px;
  margin-top:8px;
  overflow-wrap:anywhere
}
.system-card p,.privacy p{
  font-size:11px;
  line-height:1.7;
  color:#818b75;
  margin:8px 0 0
}
.metric{
  display:inline-block;
  margin-top:8px;
  color:#5b7050;
  font-size:10px
}
.toolrow{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  color:#6c7c60;
  margin-top:12px
}
.toolicon{
  font-size:15px
}
.privacy{
  margin-top:18px
}
.privacy strong{
  font-size:12px;
  font-weight:500
}
dialog{
  border:1px solid #d0d5c7;
  background:var(--paper);
  color:#30352f;
  border-radius:7px;
  width:min(600px,calc(100vw - 30px));
  max-height:90dvh;
  padding:28px;
  box-shadow:0 20px 80px #28302730
}
dialog::backdrop{
  background:#28302460;
  backdrop-filter:blur(3px)
}
dialog h2{
  font-family:Georgia,serif;
  font-weight:400;
  font-size:26px;
  margin:0 0 24px
}
dialog label{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin:18px 0 8px
}
dialog input,dialog textarea{
  border:1px solid #d1d8c7;
  border-radius:4px;
  background:#fffefb;
  color:#30352f;
  padding:12px;
  width:100%;
  font-size:13px
}
dialog textarea{
  resize:vertical
}
.dialog-actions{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  margin-top:22px
}
.dialog-actions button:not(.primary){
  border:0;
  background:transparent;
  color:var(--muted);
  padding:10px;
  font-size:12px
}
.note-preview{
  max-height:75dvh;
  overflow:auto
}
.note-preview h2{
  font-size:21px;
  line-height:1.5;
  padding-right:35px;
  overflow-wrap:anywhere
}
#noteContent{
  white-space:pre-wrap;
  font-size:13px;
  line-height:1.9;
  color:#66715b;
  overflow-wrap:anywhere
}
#closeNote{
  float:right;
  border:0;
  background:#e8ecdf;
  color:var(--accent);
  border-radius:4px;
  padding:7px 9px
}
.workspace-toggle,.close-sidebar,.sidebar-backdrop{
  display:none
}
.voice-toggle { display:flex; align-items:center; gap:7px; width:fit-content; font-size:11px; color:#69725f; margin:0 0 9px 2px; cursor:pointer; }
.voice-toggle input { accent-color:var(--accent); margin:0; }
.voice-toggle .ti { font-size:15px; }
.speech-controls { display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin-top:14px; padding-top:10px; border-top:1px solid var(--line); white-space:normal; }
.speech-controls button { border:1px solid #ccd4c2; border-radius:4px; background:#eef1e7; color:#4b6048; padding:6px 9px; font-size:10px; }
.speech-controls button:hover { background:#e2e8d9; }
.speech-controls [role=status] { color:#69725f; font-size:10px; }
.markdown, #noteContent.markdown {
  white-space:normal;
  min-width:0;
}
.markdown > :first-child { margin-top:0; }
.markdown > :last-child { margin-bottom:0; }
.markdown p, .markdown ul, .markdown ol, .markdown blockquote, .markdown pre, .markdown table {
  margin:0 0 1em;
}
.markdown h1, .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6 {
  font-family:inherit;
  color:#35432f;
  font-weight:700;
  line-height:1.4;
  margin:1.3em 0 .6em;
  padding:0;
}
.markdown h1 { font-size:1.65em; }
.markdown h2 { font-size:1.4em; }
.markdown h3 { font-size:1.2em; }
.markdown h4, .markdown h5, .markdown h6 { font-size:1em; }
.markdown ul, .markdown ol { padding-left:1.7em; }
.markdown li + li { margin-top:.25em; }
.markdown li > p { margin-bottom:.4em; }
.markdown li > ul, .markdown li > ol { margin-bottom:0; }
.markdown a { color:#446b3f; text-decoration:underline; text-underline-offset:3px; }
.markdown blockquote { border-left:3px solid #c5cdbb; padding:2px 0 2px 16px; color:#69725f; }
.markdown code { font-family:Consolas,'Courier New',monospace; font-size:.9em; background:#e9ecdf; padding:2px 5px; border-radius:3px; }
.markdown pre { padding:15px; background:#e9ecdf; border:1px solid #d8dece; border-radius:5px; overflow-x:auto; white-space:pre; overscroll-behavior-x:contain; }
.markdown pre code { background:none; padding:0; border-radius:0; overflow-wrap:normal; }
.markdown table { display:block; max-width:100%; width:max-content; border-collapse:collapse; overflow-x:auto; }
.markdown th, .markdown td { border:1px solid #d5dccb; padding:7px 12px; text-align:left; }
.markdown th { background:#e9ecdf; font-weight:700; }
.markdown hr { border:0; border-top:1px solid var(--line); margin:1.5em 0; }
.markdown input[type=checkbox] { width:13px; margin:0 6px 0 0; accent-color:var(--accent); }
.brand small,.filter::placeholder,.muted,.vault-location small,.connection,.model-chip,.breadcrumbs{
  color:#69735f
}
.welcome p,.suggestion small,.suggestion-number,.composer textarea::placeholder,.composer-footer,.disclaimer,.system-card p,.privacy p,.system-label{
  color:#69725f
}
.note-row,.new-link,.task-row{
  font-size:12px
}
.suggestion strong{
  font-size:13px
}
.suggestion small{
  font-size:11px
}
.model-chip{
  font-size:11px
}
.disclaimer{
  font-size:10px
}
.assistant-response{
  display:flex;
  align-items:flex-start;
  gap:9px;
  min-width:0
}
.message-content{
  min-width:0;
  flex:1;
  overflow-wrap:anywhere
}
.reply-status{
  position:relative;
  display:grid;
  place-items:center;
  flex:0 0 15px;
  width:15px;
  height:15px;
  margin-top:5px;
  border:1.5px solid #949b8b;
  border-radius:50%;
  color:#7c8672
}
.reply-status[data-state="processing"]{
  border-color:transparent
}
.reply-status[data-state="processing"]::before{
  content:'';
  position:absolute;
  inset:-1.5px;
  border:1.5px solid #d3d6cd;
  border-top-color:#7c8275;
  border-radius:50%;
  animation:reply-status-spin 1s linear infinite
}
.reply-status .ti{
  font-size:11px
}
.message-content.is-streaming::after{
  content:'';
  display:inline-block;
  width:2px;
  height:1em;
  margin-left:3px;
  vertical-align:-.13em;
  background:#8e9782;
  animation:stream-caret 1.05s steps(2,jump-none) infinite
}
@keyframes reply-status-spin{
  to{
    transform:rotate(360deg)
  }
}
@keyframes stream-caret{
  50%{
    opacity:.2
  }
}
@media(min-width:1600px){
  .app{
    grid-template-columns:290px minmax(0,1fr)
  }
}
@media(max-width:1000px){
  .app{
    grid-template-columns:240px minmax(0,1fr)
  }
  .sidebar{
    padding:25px 15px 18px
  }
  .topbar{
    padding:0 28px
  }
  .messages{
    padding-left:30px;
    padding-right:30px
  }
  .model-chip{
    max-width:160px
  }
  .welcome h1{
    font-size:40px
  }
}
@media(max-height:740px) and (min-width:651px){
  .brand{
    padding-bottom:22px
  }
  .divider-top{
    margin-top:18px;
    padding-top:12px
  }
  .sidebar-bottom{
    padding-top:12px
  }
  .vault-location{
    display:none
  }
  .welcome{
    padding:12px 0
  }
  .welcome h1{
    font-size:36px;
    margin:16px 0 12px
  }
  .welcome p{
    margin-bottom:20px
  }
  .suggestion{
    padding:11px 2px
  }
  .messages{
    padding-top:24px;
    padding-bottom:24px
  }
  .composer-area{
    padding-bottom:15px
  }
}
@media(max-width:650px){
  .app{
    display:block
  }
  .main{
    height:100%
  }
  .topbar{
    flex-basis:60px;
    padding:0 17px;
    gap:10px
  }
  .workspace-toggle,.close-sidebar{
    display:inline-flex
  }
  .close-sidebar{
    margin-left:auto
  }
  .page-location{
    gap:8px
  }
  .breadcrumbs{
    font-size:10px
  }
  .breadcrumbs>span,.breadcrumbs>b{
    display:none
  }
  .model-chip{
    font-size:9px;
    max-width:145px
  }
  .engine-toggle{
    gap:5px
  }
  .sidebar{
    display:none;
    position:fixed;
    inset:0 auto 0 0;
    width:min(300px,calc(100vw - 45px));
    z-index:4;
    padding:28px 22px 20px
  }
  .sidebar.is-open{
    display:flex
  }
  .sidebar-backdrop:not([hidden]){
    display:block;
    position:fixed;
    inset:0;
    z-index:3;
    border:0;
    background:#27302266
  }
  .messages{
    padding:27px 25px;
    gap:25px
  }
  .welcome{
    padding:15px 0
  }
  .eyebrow{
    font-size:8px;
    letter-spacing:.11em
  }
  .welcome h1{
    font-size:37px;
    margin:22px 0 18px
  }
  .welcome p{
    font-size:12px;
    margin-bottom:28px
  }
  .desktop-break{
    display:none
  }
  .suggestion{
    gap:14px;
    padding:15px 0
  }
  .suggestion strong{
    font-size:11px
  }
  .suggestion small{
    font-size:9px
  }
  .composer-area{
    padding:8px 16px 15px;
    max-height:50%
  }
  .composer textarea{
    max-height:min(176px,24dvh);
    padding-left:15px
  }
  .composer-footer{
    padding-left:15px
  }
  .keyboard-extra{
    display:none
  }
  .disclaimer{
    font-size:8px
  }
  .details{
    top:55px;
    right:15px
  }
}
@media(max-width:650px) and (max-height:600px){
  .welcome h1{
    font-size:32px;
    margin:17px 0 14px
  }
  .welcome p{
    margin-bottom:20px
  }
  .suggestion small{
    display:none
  }
  .suggestion{
    padding:12px 0
  }
  .disclaimer{
    display:none
  }
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition:none!important
  }
  .message-content.is-streaming::after{
    animation:none
  }
}

/* Local usage dashboard: muted, accessible and responsive to small screens. */
.topbar-actions{display:flex;align-items:center;gap:14px;min-width:0}
.usage-trigger{display:inline-flex;align-items:center;gap:7px;background:transparent;
  color:#5b6557;border:1px solid #d5d9cf;border-radius:5px;padding:8px 10px;
  font-size:11px;font-weight:600;white-space:nowrap}
.usage-trigger:hover{background:#edeee7}
.usage-trigger .ti{font-size:15px}
#usageDialog{width:min(760px,calc(100vw - 26px));max-height:min(88dvh,800px);
  padding:0;overflow:hidden}
.usage-panel{padding:27px;max-height:min(88dvh,800px);overflow:auto}
.usage-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.usage-heading h2{margin:5px 0 18px;font-size:27px}
.usage-kicker{font-size:10px;letter-spacing:.12em;color:#82897b;font-weight:700}
.usage-heading .icon-button{border:1px solid var(--line);border-radius:4px;padding:7px;
  background:transparent;color:#485346}
.usage-filters{display:flex;align-items:center;gap:10px;margin-bottom:17px}
.usage-filters label{margin:0}
.usage-filters select,.usage-filters button{width:auto;border:1px solid #d4d9d0;
  border-radius:4px;background:#fefefb;padding:8px 10px;font-size:12px;color:#364332}
.usage-filters button{margin-left:auto;display:inline-flex;align-items:center;gap:6px}
.usage-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.usage-metric{border:1px solid #e0e3d9;border-radius:6px;padding:14px 12px;
  background:#fbfaf6;min-width:0}
.usage-metric span{display:block;font-size:10px;line-height:1.4;color:#777f73}
.usage-metric strong{display:block;margin-top:6px;font-size:19px;line-height:1.2;
  font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.usage-explain,.usage-footer{color:#7b8277;font-size:11px;line-height:1.65}
.usage-explain{margin:15px 0 22px}
.usage-section-title{font-size:12px;font-weight:650;margin:18px 0 10px;color:#354034}
.usage-chart{min-height:112px;display:flex;align-items:flex-end;gap:5px;
  border-bottom:1px solid var(--line);padding:6px 0}
.usage-bar-column{flex:1;min-width:9px;max-width:60px;text-align:center}
.usage-bar-track{height:92px;display:flex;align-items:flex-end;justify-content:center}
.usage-bar-fill{width:100%;max-width:34px;min-height:3px;background:#7d8b7b;border-radius:3px 3px 0 0}
.usage-bar-date{display:block;font-size:9px;color:#8b9186;white-space:nowrap}
.usage-model-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-bottom:1px solid #e2e4dc;padding:9px 0}
.usage-model-name{font-size:12px;overflow-wrap:anywhere;min-width:0}
.usage-model-stats{font-size:11px;color:#777f73;text-align:right;flex-shrink:0}
.usage-empty{color:#899083;font-size:12px;margin:12px auto}
.usage-footer{margin:18px 0 0}
@media(max-width:650px){
  .topbar-actions{gap:7px}
  .usage-trigger{padding:7px}
  .usage-trigger span{display:none}
  .usage-panel{padding:18px}
  .usage-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .usage-metric strong{font-size:17px}
  .usage-model-row{flex-direction:column;align-items:flex-start;gap:3px}
  .usage-model-stats{text-align:left}
}