:root{
  font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color-scheme: light;
  --bg:#f6f7f9;
  --panel:#fff;
  --text:#15171a;
  --muted:#666;
  --line:#ddd;
  --soft:#eceff3;
  --soft2:#f4f5f7;
  --btn:#17191d;
}
*{box-sizing:border-box}
html,body{margin:0;min-width:0;background:var(--bg);color:var(--text)}
body{overflow-x:hidden}
.app{min-height:100vh;display:flex;flex-direction:column}
aside{
  width:100%;
  padding:14px;
  background:var(--panel);
  border-bottom:1px solid var(--line);
}
main{width:100%;min-width:0;padding:14px}
h1{font-size:20px;line-height:1.15;margin:0 0 4px}
h2{font-size:18px}
.sub{font-size:12px;color:var(--muted);margin-bottom:14px}
fieldset{
  border:1px solid var(--line);
  border-radius:12px;
  margin:0 0 12px;
  padding:10px;
  min-width:0;
}
legend{font-weight:700;font-size:13px;padding:0 6px}
label{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:5px;
  align-items:center;
  margin:9px 0;
  font-size:13px
}
input,select,button,textarea{font:inherit}
input,select{
  width:100%;
  min-width:0;
  padding:10px 11px;
  border:1px solid #bbb;
  border-radius:9px;
  background:#fff;
  color:#111
}
input,select,button{min-height:44px}
.row{display:flex;gap:8px;flex-wrap:wrap}
.row > button{flex:1 1 160px}
button{
  border:0;
  border-radius:9px;
  padding:10px 12px;
  cursor:pointer;
  background:var(--btn);
  color:white;
  touch-action:manipulation
}
button.secondary{background:#e9ebef;color:var(--text)}
.card{
  width:100%;
  min-width:0;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  margin-bottom:12px
}
#previewWrap{
  width:100%;
  max-width:100%;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  background:var(--soft);
  border-radius:12px;
  padding:10px
}
#paper{
  display:block;
  width:min(100%,700px);
  height:auto;
  max-width:100%;
  background:#fff;
  box-shadow:0 2px 16px rgba(0,0,0,.12);
  margin:auto
}
.small{font-size:12px;line-height:1.45;color:var(--muted)}
.metrics{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px
}
.metric{
  min-width:0;
  background:var(--soft2);
  border-radius:9px;
  padding:9px
}
.metric span,.metric small{display:block}
.metric b{display:block;font-size:16px;overflow-wrap:anywhere}
.tabs{
  display:flex;
  gap:8px;
  margin-bottom:10px;
  overflow-x:auto;
  padding-bottom:2px;
  scrollbar-width:thin
}
.tab{
  flex:0 0 auto;
  white-space:nowrap;
  background:#e9ebef;
  color:var(--text)
}
.tab.active{background:var(--btn);color:white}
.hidden{display:none}
textarea{
  width:100%;
  max-width:100%;
  min-height:220px;
  resize:vertical;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;
  line-height:1.4;
  padding:10px;
  border-radius:10px;
  border:1px solid #bbb;
  background:#111;
  color:#eee;
  overflow:auto
}
@media(min-width:640px){
  aside,main{padding:18px}
  label{grid-template-columns:minmax(0,1fr) 130px;gap:10px}
  .metrics{grid-template-columns:repeat(4,minmax(0,1fr))}
  .card{padding:16px;margin-bottom:16px}
  #previewWrap{padding:16px}
}
@media(min-width:980px){
  .app{display:grid;grid-template-columns:minmax(300px,360px) minmax(0,1fr);align-items:start}
  aside{position:sticky;top:0;height:100vh;overflow:auto;border-right:1px solid var(--line);border-bottom:0;padding:20px}
  main{padding:24px}
}
@media(max-width:380px){aside,main{padding:10px}.metrics{grid-template-columns:1fr}.row > button{flex-basis:100%}h1{font-size:18px}}
.help-label{display:flex;align-items:center;gap:6px;min-width:0}
.help-btn{width:22px;height:22px;min-height:22px;flex:0 0 22px;padding:0;border-radius:50%;font-size:12px;font-weight:700;line-height:22px;background:#eef0f3;color:#222;border:1px solid #cfd4da}
.help-btn:hover,.help-btn:focus{background:#dfe3e8;outline:none}
.field-help{grid-column:1/-1;margin:-2px 0 2px;padding:9px 10px;border-radius:8px;background:#f7f8fa;border:1px solid #e1e4e8;font-size:12px;line-height:1.45;color:#4f5660}
.field-help strong{color:#20242a}
.field-help .expert{display:block;margin-top:5px;color:#666f7a}
.example-chip{display:inline-block;margin-top:5px;padding:2px 7px;border-radius:999px;background:#eceff3;color:#353a42;font-size:11px}
.help-popover{position:fixed;z-index:1000;left:12px;right:12px;bottom:12px;max-height:55vh;overflow:auto;background:#fff;border:1px solid #cfd4da;border-radius:14px;box-shadow:0 10px 40px rgba(0,0,0,.2);padding:14px}
.help-popover h3{margin:0 0 6px;font-size:16px}.help-popover p{margin:6px 0;font-size:13px;line-height:1.5}.help-popover .expert-block{margin-top:10px;padding-top:10px;border-top:1px solid #e3e6ea}.help-close{position:absolute;right:10px;top:10px;min-height:34px;padding:5px 9px;background:#eceff3;color:#222}
@media(min-width:700px){.help-popover{left:auto;right:24px;bottom:24px;width:420px}}
.mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 0 14px;padding:4px;background:#eef0f3;border-radius:11px}
.mode-switch button{min-height:38px;background:transparent;color:#343941}.mode-switch button.active{background:#fff;color:#111;box-shadow:0 1px 4px rgba(0,0,0,.12)}
.field-actions{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap;margin-top:-2px}.mini-action{min-height:32px;padding:5px 9px;font-size:11px;background:#eef0f3;color:#2f353d;border:1px solid #d5dae0}
.help-images{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin:10px 0}.help-image-card{margin:0;border:1px solid #e1e4e8;border-radius:10px;overflow:hidden;background:#fafbfc}.help-image-card img{display:block;width:100%;height:180px;object-fit:cover;background:#f7f8fa}.help-image-card figcaption{padding:7px 8px;font-size:11px;line-height:1.35;color:#505862}
.beginner-callout{margin:8px 0;padding:9px 10px;border-left:3px solid #8b929c;background:#f7f8fa;border-radius:0 8px 8px 0;font-size:12px;line-height:1.45}
[data-advanced-only="true"]{display:none}body.expert-mode [data-advanced-only="true"]{display:grid}body.expert-mode .novice-only{display:none}body.expert-mode .field-help .expert{display:block}body:not(.expert-mode) .field-help .expert{display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.app-shell{min-height:100vh;display:flex;flex-direction:column}.brand-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}.brand{display:flex;align-items:center;gap:9px;color:inherit;text-decoration:none;min-width:0}.brand span{min-width:0}.brand strong{display:block;font-size:19px;line-height:1.05}.brand small{display:block;color:var(--muted);font-size:10px;line-height:1.25;margin-top:3px;max-width:210px}.logo-mark{width:43px;height:43px;flex:0 0 43px;fill:none;stroke:#17191d;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}.header-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}.lang-control select{min-height:36px;padding:6px 26px 6px 8px;width:auto}.compact{min-height:36px!important;padding:7px 9px!important;font-size:11px!important}.button-link{display:inline-flex;align-items:center;justify-content:center;border-radius:9px;background:#e9ebef;color:var(--text);text-decoration:none}
.sidebar-scroll{min-height:0}.sidebar-actions{position:sticky;bottom:0;z-index:20;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:20px 0 2px;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff 14px,#fff 100%)}.sidebar-actions button{box-shadow:0 -2px 12px rgba(0,0,0,.04)}
.page-heading{font-size:18px;margin:0 0 12px}.site-footer{display:grid;gap:14px;border-top:1px solid var(--line);padding:18px 20px;background:#fff;color:#4d5560;font-size:12px;line-height:1.5}.site-footer p{margin:5px 0 0;max-width:720px}.footer-links{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.footer-links a{color:#27384d}
.help-image-card img{height:auto;aspect-ratio:4/3;object-fit:contain;background:#f5f7f9}.help-images{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.tour-hint{margin:0 0 12px;padding:9px 10px;background:#f3f6f9;border:1px solid #dce3ea;border-radius:10px;font-size:12px;line-height:1.4}.tour-hint button{margin-top:7px}.tour-overlay{position:fixed;inset:0;z-index:1998;background:rgba(15,23,42,.4)}.tour-card{position:fixed;z-index:2000;left:50%;bottom:24px;transform:translateX(-50%);width:min(92vw,440px);background:#fff;border:1px solid #cbd5e1;border-radius:14px;box-shadow:0 18px 60px rgba(0,0,0,.28);padding:16px}.tour-card h3{margin:3px 0 8px}.tour-card p{margin:0 0 14px;line-height:1.5;color:#4b5563}.tour-progress{font-size:11px;color:#6b7280}.tour-actions{display:flex;justify-content:flex-end;gap:7px;flex-wrap:wrap}.tour-highlight{position:relative!important;z-index:1999!important;outline:4px solid rgba(59,130,246,.75)!important;outline-offset:4px;border-radius:8px}
@media(min-width:980px){aside{display:flex;flex-direction:column}.sidebar-scroll{overflow:auto;flex:1;padding-right:3px}.sidebar-actions{flex:0 0 auto}.site-footer{grid-template-columns:minmax(0,1.4fr) minmax(320px,1fr);align-items:center}}
@media(max-width:639px){.brand-row{align-items:center}.brand small{display:none}.header-tools .button-link{display:none}.site-footer{padding-bottom:88px}.sidebar-actions{position:fixed;left:0;right:0;bottom:0;padding:10px 12px;background:#fff;border-top:1px solid var(--line);z-index:900}.help-popover{bottom:82px;max-height:60vh}body{padding-bottom:70px}}
.info-page{max-width:860px;margin:0 auto;padding:32px 20px 70px}.info-page article{margin-top:28px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:clamp(18px,4vw,38px)}.info-page h1{font-size:clamp(28px,5vw,42px)}.info-page h2{margin-top:30px}.info-page p{line-height:1.7;color:#4b5563}.faq-list details{border-top:1px solid var(--line);padding:14px 0}.faq-list details:last-child{border-bottom:1px solid var(--line)}.faq-list summary{font-weight:700;cursor:pointer}.faq-list p{margin-bottom:0}