/* Printer Studio / Obsidian mobile UI - 2026-10-20. Safe iPhone PWA layout */
:root {color-scheme:dark;--bg:#000;--surface:#101014;--surface2:#17171d;--line:#282832;--muted:#9c9ca9;--purple:#b7a0ff;--blue:#9dbaff;--shadow:0 14px 46px #0008}
html{background:#000;scrollbar-color:#32323b transparent}
body,.main,.app-shell{background:#000;color:#f5f5f8}
.main{background:#000}
.sidebar{background:#09090b;border-right:1px solid #222229}
.panel,.quick-card,.job-row{background:#111115;border:1px solid #262630}
.panel,.quick-card,.job-row,.welcome{box-shadow:none}
.quick-card:hover{background:#19171f;border-color:#60527a}
.welcome{background:linear-gradient(135deg,#141018 0%,#15111b 55%,#0b0b10 100%);border:1px solid #2c2735}
.topbar{background:#000;border-color:#202026}
.topbar-title{font-family:inherit;font-weight:750;letter-spacing:-.5px}
.connection-pill{background:#15131a;color:#d4c9ef;border-color:#38303f;max-width:174px}
.connection-pill #header-state{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.connection-pill .mini-dot{flex-shrink:0}
.btn.primary{background:linear-gradient(120deg,#b69af6,#a389ef);color:#17101f;box-shadow:none}
.btn.secondary,.subtle-btn{background:#202027;color:#e8e5ef;border-color:#393640}
.panel-icon,.quick-icon.purple{background:#332943}
.panel h2,.panel h3,.quick-card strong{font-family:inherit}
.tip-panel{background:#121018}
.input-wrap input,.input-wrap select,.login-card input{background:#18181e;border-color:#32323b;color:#fff}
.dropzone{background:#111115;border-color:#46404d}
.selected-file,.photo-preview,.segmented{background:#17171e}
.size-card{background:#15151a}
.mobile-nav{isolation:isolate}
a{color:#c6b3ff}
:focus-visible{outline:2px solid #b7a0ff!important;outline-offset:3px}
@media(max-width:760px){
 html,body{width:100%;min-height:100%;overscroll-behavior:none}
 .app-shell{height:100dvh;min-height:100dvh;overflow:hidden}
 .main{display:flex;height:100dvh;min-height:0;width:100%;overflow:hidden}
 .topbar{
   z-index:10;height:calc(72px + env(safe-area-inset-top,0px));
   min-height:calc(72px + env(safe-area-inset-top,0px));
   padding:calc(env(safe-area-inset-top,0px) + 10px) 20px 10px;
   border-bottom:1px solid #1f1f24;
   align-items:center;position:relative;flex-shrink:0
 }
 .topbar-title{font-size:21px;line-height:1.15}
 .tiny-overline{font-size:10px;letter-spacing:1.2px;color:#9996a8;line-height:1.2}
 .topbar .connection-pill{font-size:10px;max-width:145px;height:34px;padding:6px 10px;background:#16131c}
 .topbar .connection-pill .mini-dot{width:7px;height:7px}
 .main-scroll{
  width:100%;flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;
  overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;
  padding:22px 17px calc(105px + env(safe-area-inset-bottom,0px));
 }
 .screen{min-width:0}
 .welcome{min-height:0;display:block;padding:25px 22px 26px;border-radius:25px;overflow:hidden}
 .welcome .hero-visual{display:none}
 .welcome h1{font-size:clamp(28px,7.3vw,38px);letter-spacing:-1.45px;line-height:1.14;margin:17px 0 10px;max-width:100%}
 .welcome h1 br{display:none}
 .welcome .eyebrow{font-size:10px;letter-spacing:1.1px}
 .welcome p{max-width:100%;font-size:12px;line-height:1.55;color:#aaa8b6;margin:0 0 17px}
 .welcome .btn{font-size:12px;min-height:44px;padding:11px 16px;border-radius:13px}
 .section-label{margin:24px 1px 14px}
 .section-label h2{font-size:16px;font-weight:800;letter-spacing:-.3px}
 .quick-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .quick-card{border-radius:18px;min-height:142px;padding:15px 13px}
 .quick-card .chev{top:18px;right:13px}
 .quick-card strong{font-size:12px;line-height:1.3;margin-top:13px}
 .quick-card>span:not(.quick-icon){font-size:10px;line-height:1.4;margin-top:5px}
 .quick-card:nth-child(3){
   grid-column:span 2;display:flex;flex-wrap:wrap;align-items:center;
   min-height:89px;gap:0 12px;padding:13px 16px
 }
 .quick-card:nth-child(3) strong{margin:0;flex:1}
 .quick-card:nth-child(3)>span:not(.quick-icon){flex-basis:calc(100% - 55px);margin:-4px 0 0 50px}
 .quick-card:nth-child(3) .quick-icon{align-self:center}
 .home-bottom{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:15px}
 .printer-panel,.tip-panel{padding:18px 17px;border-radius:20px}
 .printer-panel .panel-row{gap:10px;flex-wrap:wrap}
 .panel-row h3{font-size:13px}
 .panel-row span:not(.panel-icon):not(.status-pill){font-size:10px}
 .panel-icon{width:42px;height:42px;flex-shrink:0}
 .status-pill{font-size:10px;white-space:nowrap;margin-left:auto;padding:7px 9px}
 .printer-meta{padding:16px 0 11px}
 .printer-meta strong{overflow-wrap:anywhere}
 .tip-panel{min-height:135px}
 .tip-panel h3{margin:8px 0 6px}
 .linkline{padding-top:12px}
 .mobile-nav{
   position:fixed;left:0;right:0;bottom:0;z-index:99;
   display:flex;height:calc(62px + env(safe-area-inset-bottom,0px));
   background:rgba(11,11,14,.97);border-top:1px solid #29252f;
   box-shadow:0 -12px 28px #0008;padding:5px 5px calc(4px + env(safe-area-inset-bottom,0px));
   backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)
 }
 .mobile-tab{font-size:10px;gap:3px;min-width:0;color:#81808e;transition:color .18s ease}
 .mobile-tab svg{width:21px;height:21px}
 .mobile-tab.active{color:#bba6ff}
 .screen-intro{padding-bottom:9px}
 .screen-intro h1{font-size:30px;letter-spacing:-1.15px;margin:9px 0 6px}
 .screen-intro p{font-size:12px;line-height:1.6}
 .workflow{max-width:100%;gap:12px}
 .workflow-panel{padding:18px 15px;border-radius:19px}
 .panel-heading{margin-bottom:17px}
 .panel-heading h2{font-size:15px}
 .panel-heading p{font-size:11px}
 .step{width:36px;height:36px}
 .dropzone{min-height:180px}
 .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .input-wrap input,.input-wrap select{width:100%;min-width:0}
 .result-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 .result-buttons .btn{min-width:0}
 .jobs-list{gap:9px}
 .job-row{padding:14px;gap:9px;flex-wrap:wrap;border-radius:15px}
 .job-main{flex-basis:calc(100% - 55px)}
 .job-row .subtle-btn,.job-row a{margin:1px 0 0;padding:9px 11px;border-radius:9px}
 .login-shell{align-items:center;padding:calc(20px + env(safe-area-inset-top,0px)) 16px calc(20px + env(safe-area-inset-bottom,0px))}
 .login-card{background:#121116}
 .toast{bottom:calc(80px + env(safe-area-inset-bottom,0px));background:#28202f}
}
@media(max-width:370px){
 .quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .quick-card:nth-child(3){grid-column:span 2}
 .form-grid{grid-template-columns:1fr}
 .welcome h1{font-size:27px}
 .topbar{padding-left:15px;padding-right:15px}
 .topbar .connection-pill{max-width:124px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

.preset-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.preset-bar select{min-width:155px;flex:1;max-width:100%;min-height:42px;padding:10px 12px;background:#1a1a20;color:#eee;border:1px solid #33313c;border-radius:11px}
.preset-bar .subtle-btn{min-height:42px;margin:0}
.print-preview-dialog{position:fixed;inset:20px;max-width:930px;width:calc(100% - 40px);height:min(90dvh,900px);max-height:calc(100dvh - 40px);margin:auto;padding:0;color:#fff;background:#111116;border:1px solid #3c3746;border-radius:18px;box-shadow:0 24px 90px #000d;overflow:hidden}
.print-preview-dialog::backdrop{background:#000d;backdrop-filter:blur(8px)}
.print-preview-dialog[open]{display:flex;flex-direction:column}
.preview-head{min-height:65px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;background:#141318;border-bottom:1px solid #303038}
.preview-head strong{display:block;font-size:14px}.preview-head small{display:block;font-size:10px;color:#9c9aa8;margin-top:3px}
.preview-head .icon-btn{font-size:26px;font-weight:400;flex-shrink:0}
#print-preview-frame,#preview-frame{display:block;width:100%;flex:1;min-height:0;border:0;background:white}
.preview-actions{display:flex;justify-content:flex-end;gap:10px;align-items:center;padding:12px 16px;border-top:1px solid #303039;background:#101014}
.preview-actions .btn{min-height:40px;padding:9px 15px;font-size:12px}
.toolbox-drop{margin-bottom:15px}
@media(max-width:760px){
 .preset-bar{display:grid;grid-template-columns:1fr 1fr;gap:9px}
 .preset-bar select{grid-column:span 2;min-width:0;width:100%}
 .print-preview-dialog{inset:calc(14px + env(safe-area-inset-top,0px)) 9px calc(10px + env(safe-area-inset-bottom,0px));width:calc(100% - 18px);height:calc(100dvh - 26px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));max-height:none;border-radius:18px}
 .preview-actions .btn{flex:1}
 .quick-card strong{font-family:-apple-system,BlinkMacSystemFont,'DM Sans',sans-serif!important}
}

@media(max-width:760px){
 .welcome h1 br{display:initial}
 .welcome h1{font-size:clamp(26px,7vw,36px)}
}
@media(max-width:760px) and (display-mode:standalone){
 .topbar{
   height:calc(72px + max(54px, env(safe-area-inset-top,0px)));
   min-height:calc(72px + max(54px, env(safe-area-inset-top,0px)));
   padding-top:calc(max(54px, env(safe-area-inset-top,0px)) + 10px);
 }
 .mobile-nav{
   height:calc(62px + max(16px, env(safe-area-inset-bottom,0px)));
   padding-bottom:calc(4px + max(16px, env(safe-area-inset-bottom,0px)));
 }
 .main-scroll{padding-bottom:calc(107px + max(16px, env(safe-area-inset-bottom,0px)))}
 .toast{bottom:calc(80px + max(16px, env(safe-area-inset-bottom,0px)))}
}
.expired-note{display:inline-flex;padding:9px 11px;color:#aaa3ac;font-size:11px}