/* PADIEM Phone — original Glass visual language adapted from Padiem Chat.
 * Reference: apps/padiem-chat/static/{padiem-glass.css,padiem-glass-portrait.css}
 * Phone task behavior is deliberately unchanged and the demo stays mock-only.
 */
:root{
  color-scheme:light;
  --slate:#17212a;
  --sub:#526371;
  --accent:#79bce7;
  --glass:rgba(243,247,249,.86);
  --glass-line:rgba(255,255,255,.64);
  --rail:252px;
  --shadow:0 24px 70px rgba(28,36,44,.16),inset 0 1px 0 rgba(255,255,255,.72);
  --font:"SUIT Variable","SUITE Variable","Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{min-width:320px;background:#aeb6bf}
body{margin:0;min-height:100vh;font-family:var(--font);color:var(--slate);background:
  linear-gradient(180deg,rgba(26,34,42,.21),rgba(255,255,255,.06) 38%,rgba(29,38,47,.21)),
  radial-gradient(circle at 18% 22%,rgba(255,255,255,.37),transparent 34%),
  radial-gradient(circle at 76% 62%,rgba(105,156,189,.22),transparent 38%),
  linear-gradient(135deg,#88939d 0%,#b8c1c8 36%,#d5d9dc 58%,#909aa4 100%);
  background-attachment:fixed;letter-spacing:-.015em;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.1;background-image:
  linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:84px 84px;mix-blend-mode:soft-light}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
button:disabled{opacity:.54;cursor:not-allowed}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid #366d96;outline-offset:3px}
button,select{touch-action:manipulation}
.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{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);min-height:100vh;position:relative;z-index:1}
.app-shell::before{content:"";position:fixed;top:0;left:0;right:0;height:2px;z-index:20;opacity:.36;background:linear-gradient(90deg,#79bce7,rgba(255,255,255,.96),#c7a76b);pointer-events:none}

/* Padiem Chat sidebar: graphite frosted glass, understated controls. */
.sidebar{position:sticky;top:0;align-self:start;height:100vh;z-index:6;padding:22px 14px 18px;color:#f6f8fa;display:flex;flex-direction:column;min-height:0;
  background:linear-gradient(180deg,rgba(43,51,60,.72),rgba(35,43,51,.60));
  border-right:1px solid rgba(255,255,255,.24);
  box-shadow:18px 0 52px rgba(20,28,36,.15),inset -1px 0 0 rgba(255,255,255,.08);
  backdrop-filter:blur(28px) saturate(115%);-webkit-backdrop-filter:blur(28px) saturate(115%)}
.brand-row{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:25px}
.brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:16px;letter-spacing:-.02em;white-space:nowrap}
.brand-icon,.topbar-logo{display:grid;place-items:center;border:1px solid rgba(255,255,255,.32);border-radius:11px;background:rgba(239,244,247,.19);color:#fff;
  box-shadow:0 9px 24px rgba(17,25,33,.12),inset 0 1px 0 rgba(255,255,255,.19)}
.brand-icon{width:36px;height:36px;font-size:18px;font-weight:700;flex:none}
.brand-corner{width:37px;height:37px;border:1px solid rgba(255,255,255,.22);border-radius:11px;display:grid;place-items:center;background:rgba(241,245,248,.10);font-size:18px;color:rgba(255,255,255,.72)}
.new-task{display:flex;align-items:center;gap:11px;width:100%;padding:14px 15px;background:rgba(241,245,248,.12);border:1px solid rgba(255,255,255,.25);color:#f5f8fc;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);border-radius:10px;text-align:left;font-size:13px;font-weight:700}
.new-task:hover,.nav-link:hover{background:rgba(255,255,255,.15);color:#fff}
.new-task span{font-size:18px;font-weight:400}
.nav-label{margin:29px 11px 12px;color:rgba(246,250,252,.50);font-size:10px;letter-spacing:.15em;font-weight:750}
nav{display:grid;gap:5px}
.nav-link{display:flex;gap:12px;align-items:center;text-align:left;color:rgba(247,250,253,.70);background:transparent;border:1px solid transparent;border-radius:9px;padding:12px 11px;font-size:13px;line-height:1.2}
.nav-link span{width:20px;display:inline-grid;place-items:center;font-size:16px;font-weight:500}
.nav-link.active{color:#fff;background:linear-gradient(90deg,rgba(255,255,255,.15),rgba(255,255,255,.04));border-color:rgba(255,255,255,.14);font-weight:750}
.sidebar-lower{margin-top:auto}
.side-divider{height:1px;background:rgba(255,255,255,.15);margin-bottom:19px}
.sidebar-memo{font-family:system-ui,sans-serif;font-size:10px;font-weight:800;letter-spacing:.11em;margin:0 5px 8px;color:rgba(255,255,255,.83)}
.presence-dot,.status-dot,.activity-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#89c6eb;box-shadow:0 0 10px rgba(136,201,255,.34);margin-right:7px}
.sidebar-caption{font-size:11px;color:rgba(255,255,255,.55);margin:0 5px 18px}
.sidebar-account{display:flex;align-items:center;gap:9px;padding:11px 9px;background:rgba(241,245,248,.09);border-radius:8px;border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.86);font-size:11px;font-weight:700;letter-spacing:.03em}
.account-mark{height:24px;width:24px;border-radius:6px;border:1px solid rgba(255,255,255,.18);display:grid;place-items:center}
.muted-mark{color:rgba(255,255,255,.52);font-weight:500}

/* Atmospheric canvas and the exact approved Padiem Chat portrait asset. */
.main-content{position:relative;min-width:0;isolation:isolate}
.main-content::before{content:"";position:fixed;z-index:0;pointer-events:none;top:82px;right:0;bottom:0;width:min(48vw,680px);
  background:url("/assets/padiem-glass-female.jpg") right center / auto min(89vh,900px) no-repeat;
  filter:saturate(.72) contrast(1.01) brightness(1.05);opacity:.76;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.40) 17%,#000 31%,#000 100%);
  mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.40) 17%,#000 31%,#000 100%)}
.topbar{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:18px;height:78px;padding:0 clamp(22px,3vw,44px);
  color:#f4f7fa;background:linear-gradient(180deg,rgba(49,58,67,.49),rgba(58,67,76,.25));border-bottom:1px solid rgba(255,255,255,.22);
  box-shadow:0 10px 32px rgba(20,28,36,.08),inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter:blur(26px) saturate(112%);-webkit-backdrop-filter:blur(26px) saturate(112%)}
.topbar-title{font-size:12px;font-weight:650;letter-spacing:.10em}
.topbar-title strong{font-weight:560;letter-spacing:.015em}
.topbar-mark{font-size:17px;vertical-align:middle;margin-right:7px}
.topbar-slash{margin:0 11px;color:rgba(255,255,255,.50)}
.top-actions{display:flex;align-items:center;gap:15px}
.preview-indicator{padding:9px 12px;border:1px solid rgba(255,255,255,.24);background:rgba(243,247,249,.16);border-radius:8px;
  font:600 10px/1.2 system-ui,sans-serif;letter-spacing:.06em;white-space:nowrap}
.topbar-logo{height:34px;width:34px;border-radius:9px;font-size:14px}
.workspace{position:relative;z-index:2;padding:0 clamp(24px,3.8vw,68px) 34px;min-height:calc(100vh - 78px)}
.page{display:none}
.page.active{display:block}
.glass-stage{width:min(790px,calc(100vw - var(--rail) - clamp(380px,37vw,610px)));min-height:calc(100dvh - 104px);padding:clamp(25px,2.3vw,38px);
  margin:0;border:1px solid var(--glass-line);border-radius:30px;
  background:linear-gradient(155deg,rgba(248,250,251,.90),rgba(233,238,241,.81));
  box-shadow:var(--shadow);backdrop-filter:blur(30px) saturate(106%);-webkit-backdrop-filter:blur(30px) saturate(106%);
  display:flex;flex-direction:column;position:relative;overflow:hidden}
.stage-top{flex:none}
.eyebrow{display:flex;align-items:center;gap:11px;margin:7px 0 17px;font:700 10px/1.3 system-ui,sans-serif;color:#40576b;letter-spacing:.19em}
.eyebrow::before{content:"";height:6px;width:6px;background:var(--accent);border-radius:50%;box-shadow:0 0 10px rgba(121,188,231,.42)}
.eyebrow-line{height:1px;width:16px;background:#9eacb6}
h1{margin:0;color:#17232e;font-size:clamp(43px,4.6vw,78px);line-height:1.09;font-weight:620;letter-spacing:-.068em;word-break:keep-all}
.intro{color:#5c6974;font-size:14px;line-height:1.8;margin:22px 0 0;letter-spacing:-.02em}
.hero-presets{margin-top:30px}
.presets-title{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:700;color:#344a5d;margin-bottom:13px}
.presets-title small{font:650 9px/1.2 system-ui,sans-serif;color:#798b98;letter-spacing:.13em}
.quick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.script-row{min-width:0;display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;gap:11px;min-height:132px;padding:16px 15px;
  border:1px solid rgba(255,255,255,.66);border-radius:14px;
  background:linear-gradient(155deg,rgba(248,250,251,.75),rgba(228,234,238,.42));
  box-shadow:0 14px 34px rgba(28,38,49,.11),inset 0 1px 0 rgba(255,255,255,.67);
  backdrop-filter:blur(24px) saturate(105%);-webkit-backdrop-filter:blur(24px) saturate(105%)}
.script-row:hover{border-color:rgba(255,255,255,.90);background:linear-gradient(155deg,rgba(255,255,255,.91),rgba(232,239,245,.66))}
.script-row strong{display:block;color:#273744;font-size:13px;letter-spacing:-.03em;margin:0 0 9px}
.script-row small{font-size:11px;color:#687985;line-height:1.58;display:block;overflow-wrap:anywhere}
.small-button{align-self:flex-start;border:1px solid rgba(74,93,106,.18);border-radius:8px;padding:7px 11px;
  background:rgba(255,255,255,.50);color:#394e5b;font-size:11px;font-weight:750}
.small-button:hover{background:rgba(255,255,255,.92);border-color:rgba(74,93,106,.38)}
.hero-activity{margin-top:18px;border-top:1px solid rgba(38,58,72,.10);padding-top:12px;min-height:64px}
.activity-heading{display:flex;align-items:center;gap:5px;color:#546572;font-size:11px;font-weight:650}
.activity-heading .activity-dot{width:6px;height:6px;background:#8abadd;box-shadow:none;margin-right:3px}
.activity-disclaimer{margin-left:auto;color:#8494a0;font-size:10px;font-weight:500}
.empty-state{color:#85939e;font-size:11px;display:flex;align-items:center;gap:7px;margin-top:8px}
.empty-symbol{font-size:15px}
.compose-area{margin-top:auto;padding-top:15px}
.composer{padding:17px 18px 14px;border:1px solid rgba(255,255,255,.88);border-radius:17px;
  background:linear-gradient(165deg,rgba(255,255,255,.96),rgba(247,249,251,.89));
  box-shadow:0 18px 48px rgba(28,36,44,.14),inset 0 1px 0 rgba(255,255,255,.88)}
.composer:focus-within{border-color:rgba(79,91,101,.32);box-shadow:0 20px 50px rgba(28,36,44,.15),inset 0 1px 0 rgba(255,255,255,.95)}
.composer textarea{display:block;resize:vertical;width:100%;min-height:74px;max-height:160px;background:transparent;border:0;
  color:#192630;line-height:1.58;font-size:14px;padding:2px 1px 6px}
.composer textarea:focus{outline:0}
.composer textarea::placeholder{color:#8d9aa5}
.composer-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;border-top:1px solid rgba(48,71,83,.08);padding-top:11px}
.target-field{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.target-field label{font-size:11px;font-weight:750;color:#546574;white-space:nowrap}
.target-field input{height:35px;width:min(100%,205px);max-width:205px;border:1px solid rgba(55,79,93,.13);border-radius:8px;
  background:rgba(234,240,244,.54);padding:0 10px;font-size:12px;color:#344755}
.target-field input:focus{border-color:#82aeca}
.composer-controls{display:flex;align-items:center;gap:11px;flex:none}
.mock-chip{color:#7a8994;font:750 10px/1.2 system-ui,sans-serif;letter-spacing:.12em}
.send-button{border:0;border-radius:11px;padding:7px 8px 7px 12px;background:#30404d;color:white;font-size:11px;font-weight:700;
  display:flex;align-items:center;gap:9px;min-height:38px;box-shadow:0 9px 20px rgba(21,37,49,.18)}
.send-button:hover:not(:disabled){background:#1d2d3c}
.send-arrow{height:26px;width:26px;display:grid;place-items:center;border-radius:8px;background:rgba(255,255,255,.12);font-size:17px}
.additional-options{margin:11px 0 0}
.additional-options summary{font-size:11px;color:#687785;cursor:pointer;list-style:none;width:fit-content}
.additional-options summary::-webkit-details-marker{display:none}
.additional-options summary span{margin-left:6px}
.additional-options[open] summary{color:#354c5d;font-weight:700}
.option-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.option-field label{display:block;color:#526370;font-size:11px;margin-bottom:6px;font-weight:750}
.option-field select{width:100%;height:38px;background:rgba(255,255,255,.75);border:1px solid rgba(55,79,93,.18);border-radius:8px;color:#2c3b4a;
  font-size:11px;padding:0 10px}
.hint{color:#677b87;font-size:10px;margin:10px 0 0;line-height:1.55}
.form-message{font-size:11px;min-height:10px;color:#8b3c38;margin:5px 0 0}
.compose-note{font-size:10px;color:#84919a;text-align:center;margin:10px 0 0}
.soft-footer{display:flex;justify-content:space-between;width:min(790px,calc(100vw - var(--rail) - clamp(380px,37vw,610px)));
  padding:12px 4px 6px;color:rgba(37,51,64,.58);font:650 9px/1.2 system-ui,sans-serif;letter-spacing:.13em}
.dashboard-metrics{display:none} /* Available on the Usage page; keep dashboard visually like Padiem Chat. */

/* Active task reads like a native assistant response, not a second dashboard. */
#activeTask:not(.empty-state){margin-top:11px;font-size:12px;line-height:1.55}
.task-title{margin:0 0 8px;color:#344958;font-size:12px;font-weight:630;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.task-status{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:7px}
.task-status strong{color:#315977;font-size:12px}
.state-pill{display:inline-flex;padding:4px 8px;border-radius:6px;color:#315875;background:rgba(121,188,231,.14);font-size:10px;line-height:1.3;font-weight:750}
.state-pill.fail{color:#9c4949;background:#ffe9e8}
.state-pill.progress{color:#516b89;background:rgba(121,188,231,.15)}
.progress-bar{height:5px;width:100%;background:rgba(38,59,70,.10);border-radius:999px;overflow:hidden}
.progress-bar span{display:block;height:100%;background:linear-gradient(90deg,#85b6d8,#557e9c);transition:width .4s}
.task-meta{display:flex;justify-content:space-between;gap:10px;color:#637582;font-size:10px;margin-top:7px}
.task-result{padding:10px 12px;margin-top:8px;background:rgba(255,255,255,.53);border-radius:8px;color:#425f6f;font-size:11px}
.task-actions{display:flex;justify-content:flex-end;margin-top:7px}
.danger{border:1px solid rgba(141,65,65,.28);background:rgba(255,241,241,.45);border-radius:7px;padding:7px 11px;color:#8b4444;font-size:11px}
.danger:hover{background:rgba(255,232,232,.8)}

/* Script, history, usage secondary surfaces keep the same Glass panel. */
.sub-stage{justify-content:flex-start;min-height:calc(100dvh - 104px)}
.sub-stage h1{font-size:clamp(46px,5.3vw,75px)}
.secondary-page .intro{margin:17px 0 30px}
.template-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-top:24px}
.template-card{display:flex;flex-direction:column;min-height:194px;padding:20px;border-radius:15px;border:1px solid rgba(255,255,255,.70);
  background:linear-gradient(155deg,rgba(255,255,255,.70),rgba(228,235,239,.47));box-shadow:0 13px 34px rgba(28,38,49,.10)}
.template-icon{color:#58748a;font-size:21px;margin-bottom:18px}
.template-card h2{margin:0;color:#263745;font-size:16px}
.template-card p{color:#536774;font-size:12px;line-height:1.7;flex:1}
.template-card .small-button{margin-top:14px;font-size:12px}
.sub-page-note{margin-top:auto;padding-top:28px;color:#697c88;font-size:12px;line-height:1.7}
.secondary{border:1px solid rgba(49,69,81,.23);border-radius:9px;padding:9px 13px;font-size:12px;font-weight:680;color:#344c5a;background:rgba(255,255,255,.52)}
.secondary:hover{background:rgba(255,255,255,.85)}
.refresh-btn{align-self:flex-start;margin:5px 0 18px}
.table-scroll{width:100%;overflow-x:auto;background:rgba(248,250,251,.44);border-radius:14px;border:1px solid rgba(255,255,255,.66)}
table{width:100%;min-width:570px;border-collapse:collapse;text-align:left}
th,td{padding:14px 11px;border-bottom:1px solid rgba(72,93,108,.10);font-size:11px;color:#405463}
th{font-size:10px;color:#657887;background:rgba(255,255,255,.33);font-weight:750}
tbody tr:last-child td{border-bottom:0}
.usage-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:10px}
.stat{display:flex;flex-direction:column;padding:20px;background:linear-gradient(150deg,rgba(255,255,255,.75),rgba(234,240,244,.43));
  border:1px solid rgba(255,255,255,.68);border-radius:15px;box-shadow:0 12px 30px rgba(32,41,51,.10)}
.stat>span{color:#586b7a;font-size:12px}
.stat strong{color:#1b2a34;margin:10px 0 3px;font-size:32px;letter-spacing:-.035em;font-weight:680;font-variant-numeric:tabular-nums}
.stat em{font-style:normal;font-size:14px;color:#788994}
.stat small{color:#748593;font-size:11px}

@media(max-width:1439px){
 .glass-stage,.soft-footer{width:min(760px,calc(100vw - var(--rail) - clamp(320px,34vw,470px)))}
 .main-content::before{width:min(43vw,580px);background-size:auto min(84vh,800px);opacity:.70}
 h1{font-size:clamp(42px,4.8vw,73px)}
}
@media(max-width:1160px){
 .workspace{padding:10px 28px 28px}
 .glass-stage,.soft-footer{width:min(790px,calc(100vw - var(--rail) - 60px))}
 .main-content::before{right:-12%;opacity:.19;width:72vw;background-size:auto 82vh}
 .glass-stage{margin:0 auto;min-height:calc(100dvh - 124px)}
 .soft-footer{margin:auto}
}
@media(max-width:820px){
 :root{--rail:210px}
 .sidebar{padding:17px 10px}
 .brand{font-size:13px;gap:8px}
 .brand-icon{width:31px;height:31px}
 .brand-corner{display:none}
 .workspace{padding:12px 18px 24px}
 .glass-stage,.soft-footer{width:100%}
 .glass-stage{padding:25px;min-height:calc(100dvh - 126px)}
 .topbar{padding:0 22px;height:64px}
 .main-content::before{top:64px}
}
@media(max-width:650px){
 .app-shell{display:block}
 .sidebar{height:auto;position:relative;width:100%;display:block;padding:11px 13px 8px;background:linear-gradient(180deg,rgba(43,51,60,.88),rgba(36,45,54,.80))}
 .brand-row{margin:0 0 10px}.brand{font-size:15px}.brand-icon{width:31px;height:31px}
 .new-task,.nav-label,.sidebar-lower{display:none}
 nav{display:flex;overflow-x:auto;gap:5px;padding-bottom:2px}
 .nav-link{white-space:nowrap;flex:none;padding:8px 7px;font-size:11px;gap:5px}
 .nav-link span{font-size:13px;width:auto}
 .topbar{height:51px;padding:0 16px}.topbar-title{font-size:10px}.topbar-logo{display:none}.preview-indicator{padding:6px 8px;font-size:8px}
 .workspace{padding:12px 12px 30px}
 .glass-stage{width:100%;min-height:calc(100dvh - 172px);border-radius:20px;padding:23px 18px}
 .main-content::before{top:140px;right:-38%;width:125vw;opacity:.14;background-size:auto 82vh}
 .eyebrow{font-size:9px;margin:4px 0 15px}
 h1{font-size:clamp(43px,10vw,64px);letter-spacing:-.064em}
 .intro{font-size:12px;margin-top:15px}
 .hero-presets{margin-top:22px}.quick-grid{gap:7px}
 .script-row{min-height:127px;padding:12px 9px;gap:9px;border-radius:10px}
 .script-row strong{font-size:11px;margin-bottom:7px}
 .script-row small{font-size:10px;line-height:1.48}
 .small-button{padding:6px 9px;font-size:10px}
 .hero-activity{margin-top:12px}
 .composer{padding:13px 12px 11px}.composer textarea{font-size:13px;min-height:62px}
 .composer-toolbar{align-items:flex-start;flex-wrap:wrap}
 .target-field input{max-width:185px}
 .send-label{display:none}.send-button{padding:6px;background:#30404d}.send-arrow{width:29px;height:27px}
 .mock-chip{font-size:9px}.option-grid{grid-template-columns:1fr}
 .compose-note{font-size:9px;line-height:1.5}
 .soft-footer{font-size:8px;padding-left:5px;padding-right:5px}
 .template-grid{grid-template-columns:1fr}.sub-stage{min-height:calc(100dvh - 172px)}
 .sub-stage h1{font-size:47px}
 .template-card{min-height:163px}
}
@media(max-width:375px){
 .glass-stage{padding:19px 14px}
 h1{font-size:40px}
 .quick-grid{gap:5px}.script-row{padding:10px 8px}.script-row strong{font-size:10px}
 .script-row small{font-size:9px}.target-field input{max-width:150px}
 .topbar-title{letter-spacing:0}
}
@media(prefers-reduced-motion:reduce){
 *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* Saved script workspace follows the approved Padiem Glass surfaces. */
.script-manager-toolbar{display:flex;align-items:center;gap:15px;flex-wrap:wrap;margin:0 0 20px}
.script-manager-toolbar span{color:#576977;font-size:11px}
.script-editor{padding:20px;margin:0 0 22px;border:1px solid rgba(255,255,255,.74);border-radius:16px;background:rgba(247,250,251,.77);box-shadow:0 15px 35px rgba(28,38,49,.11)}
.script-editor[hidden],.danger[hidden]{display:none!important}
.script-form-title{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:14px;color:#273a49}
.script-form-title strong{font-size:16px}
.text-button{color:#4c6070;border:0;background:transparent;font-size:12px;padding:7px}
.script-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.script-fields label{min-width:0;display:block;font-size:12px;font-weight:680;color:#445b69}
.script-fields label.wide{grid-column:1/-1}
.script-fields input,.script-fields textarea{display:block;width:100%;margin-top:6px;padding:11px 12px;border:1px solid rgba(52,74,90,.20);border-radius:9px;background:rgba(255,255,255,.80);color:#1d303d;font-size:13px}
.script-fields textarea{resize:vertical;min-height:62px;line-height:1.55}
.script-form-actions{display:flex;gap:10px;align-items:center;margin-top:16px}
.script-message{margin:10px 0 0;font-size:11px;color:#944e4a}
.template-card .edit-script{margin-top:7px;color:#60788a;background:rgba(238,244,248,.71)}
@media(max-width:650px){.script-editor{padding:15px}.script-fields{grid-template-columns:1fr}.script-fields label.wide{grid-column:auto}.script-manager-toolbar{align-items:flex-start;flex-direction:column;gap:8px}}

.detail-link{border:0;padding:3px 0;background:none;color:#2b5f7f;font-size:11px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.detail-link:hover{color:#133b52}
.history-details{background:rgba(247,250,251,.78);border:1px solid rgba(255,255,255,.74);box-shadow:0 15px 35px rgba(28,38,49,.11);border-radius:15px;margin-top:17px;padding:18px}
.history-details[hidden]{display:none!important}
#historyDetailsContent{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px}
.detail-item{min-width:0}
.detail-item strong{display:block;font-size:11px;color:#607481}
.detail-item p{margin:5px 0 0;font-size:12px;line-height:1.65;color:#263d4d;white-space:pre-wrap;overflow-wrap:anywhere}
@media(max-width:650px){#historyDetailsContent{grid-template-columns:1fr}}

/* Phone task timeline/report — local mock only, matches PADIEM Glass surfaces. */
.history-extras{grid-column:1/-1;padding:17px 0 2px;border-top:1px solid rgba(53,80,97,.15);margin-top:5px}
.history-extras>strong{font-size:13px;color:#273f50}
.phone-stage-timeline{list-style:none;display:flex;flex-wrap:wrap;gap:9px;padding:0;margin:13px 0}
.phone-stage{display:flex;flex-direction:column;gap:5px;min-width:115px;max-width:180px;padding:11px 14px;border-radius:10px;
  border:1px solid rgba(115,145,165,.22);background:rgba(244,248,250,.8)}
.phone-stage strong{font-size:11px;color:#415967;font-weight:700}
.phone-stage span{color:#66808e;font-size:10px}
.phone-stage.current{border-color:rgba(58,125,176,.45);background:rgba(214,235,248,.54)}
.phone-stage.stopped{border-color:rgba(160,106,106,.32);background:rgba(250,238,238,.65)}
.report-download{margin:3px 0 6px}
.report-notice{font-size:10px;color:#627987;margin:8px 0}
#activeTask .small-button{margin-top:9px}
@media(max-width:650px){.phone-stage{flex:1;min-width:125px}.history-extras{padding-top:12px}}

.usage-phases{margin-top:18px;padding:18px;border-radius:16px;border:1px solid rgba(255,255,255,.68);background:rgba(246,250,251,.55)}
.usage-stage-row{margin:0 0 15px}
.usage-stage-heading{display:flex;justify-content:space-between;gap:12px;margin-bottom:7px}
.usage-stage-heading strong{font-size:11px;color:#3b5364}
.usage-stage-heading span{font-size:10px;color:#5b7486}
.usage-stage-track{height:7px;background:rgba(58,82,98,.12);border-radius:6px;overflow:hidden}
.usage-stage-track span{display:block;height:100%;background:linear-gradient(90deg,#abc8db,#627f9a);border-radius:6px}

/* Shareable presentation demo: a compact three-step guide above presets. */
.demo-walkthrough{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.demo-walkthrough span{display:flex;align-items:center;gap:7px;padding:8px 12px;
  background:rgba(255,255,255,.50);border:1px solid rgba(255,255,255,.74);
  border-radius:999px;color:#456071;font-size:11px;font-weight:650}
.demo-walkthrough b{font:700 10px/1 system-ui,sans-serif;color:#5688a9}
@media(max-width:650px){.demo-walkthrough{gap:6px;margin-top:15px}
  .demo-walkthrough span{padding:7px 9px;font-size:10px}}

/* Presenter control: reset is a deliberate confirm + page reload, never a server action. */
.demo-reset-button{padding:7px 12px;border:1px solid rgba(96,125,150,.26);border-radius:999px;
  background:rgba(255,255,255,.65);color:#486277;font-size:11px;font-weight:700;cursor:pointer}
.demo-reset-button:hover,.demo-reset-button:focus-visible{border-color:#5f8aa5;background:#fff}
@media(max-width:550px){.demo-reset-button{font-size:10px;padding:6px 8px}}