.smart-tools-home { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; padding:8px; border:1px solid #ffffffd0; border-radius:15px; background:linear-gradient(135deg,#f6ffffe8,#e9f0ffd9); box-shadow:0 3px 9px #143c5028; }
.smart-tool-card { --st-tone:#087e87; display:grid; justify-items:center; align-content:center; gap:4px; min-width:0; min-height:84px; padding:8px 3px; border:1px solid color-mix(in srgb,var(--st-tone),white 45%); border-radius:12px; background:linear-gradient(145deg,#fff,color-mix(in srgb,var(--st-tone),white 85%)); color:#173c51; text-decoration:none; text-align:center; box-shadow:0 3px 0 color-mix(in srgb,var(--st-tone),white 70%),inset 0 1px 2px #fff; }
.tone-blue { --st-tone:#1267b8; }.tone-violet { --st-tone:#783bc4; }.tone-gold { --st-tone:#ae7100; }.tone-pink { --st-tone:#c3266a; }.tone-green { --st-tone:#258043; }
.smart-tool-card>span { display:grid; place-items:center; width:29px; height:29px; border-radius:10px; background:linear-gradient(145deg,color-mix(in srgb,var(--st-tone),white 25%),var(--st-tone)); color:#fff; font-size:21px; line-height:1; box-shadow:0 2px 4px #123d5030,inset 0 1px 2px #ffffff90; }
.smart-tool-card>strong { font:800 11px/1.2 system-ui,sans-serif; }.smart-tool-card>small { font:500 9px/1.3 system-ui,sans-serif; color:#476a7b; }
.cg-spaced .smart-tools-launch { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:5px 2px; border:2px solid #e2c9ff; background:radial-gradient(ellipse at 35% 15%,#e0bcff,#9849e9 43%,#521289 100%); color:#fff; cursor:pointer; box-shadow:0 2px 5px #2a095b80,inset 0 1px 4px #ffffffd0; }
.smart-launch-icon { position:relative; display:grid; place-items:center; width:35px; height:29px; border-radius:50%; border:1px solid #f5e7ff; background:linear-gradient(135deg,#ce8cff,#6b05bb); font:800 24px/1 system-ui,sans-serif; box-shadow:0 2px 3px #270054,inset 0 1px 2px white; }
.smart-launch-icon small { position:absolute; top:-5px; right:-9px; display:grid; place-items:center; width:16px; height:16px; border-radius:50%; background:#ffdf5c; color:#512555; font:900 10px/1 system-ui,sans-serif; }
.smart-tools-launch>strong { font:850 clamp(10px,3vw,14px)/1.1 system-ui,sans-serif; }.smart-tools-launch>small { font:600 clamp(8px,2.3vw,10px)/1.2 system-ui,sans-serif; }
.smart-tools-dialog { width:min(440px,calc(100% - 20px)); max-height:calc(100dvh - 30px); padding:12px; border:1px solid #e8d8ff; border-radius:20px; background:#f5f9ff; color:#183b51; box-shadow:0 12px 60px #14012880; overflow:auto; }
.smart-tools-dialog::backdrop { background:#08152e99; }
.smart-tools-dialog>header { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:2px 3px 12px; }.smart-tools-dialog h2 { font:850 20px/1.2 system-ui,sans-serif; margin:0 0 4px; }.smart-tools-dialog header small { font:500 11px system-ui,sans-serif; color:#647689; }.smart-tools-dialog header>button { width:36px; height:36px; padding:0; border:1px solid #d9c5ef; border-radius:11px; background:#eee4ff; color:#522b80; font:500 26px/1 system-ui,sans-serif; cursor:pointer; }
.mobile-shell .mp-shell:has(.smart-play-tool) { --st-brand:var(--theme-primary,#007f7b); --st-deep:var(--theme-primary-deep,#005a57); --st-bg:#fff; --st-soft:#edf5f8; --st-ink:#193a4e; --st-muted:#647f90; --st-line:#c7dde6; padding-bottom:0!important; }
html[data-app-theme=neon] .mobile-shell .mp-shell:has(.smart-play-tool) { --st-bg:#172c42; --st-soft:#10253a; --st-ink:#eff8ff; --st-muted:#b0c8da; --st-line:#38566e; }
.mobile-shell .mp-shell:has(.smart-play-tool) .mp-content { padding:10px 10px 160px!important; }
.mobile-shell .mp-shell:has(.smart-play-tool) .mp-header { min-height:56px; padding:7px 10px!important; background:linear-gradient(125deg,var(--st-brand),var(--st-deep)); }
.mobile-shell .mp-shell:has(.smart-play-tool) .mp-header h1 { font-size:17px; color:#fff!important; white-space:normal; }
.smart-play-tool { color:var(--st-ink); }.smart-play-tool * { box-sizing:border-box; }
.smart-play-tool button,.smart-play-tool input,.smart-play-tool textarea,.smart-play-tool select { font:inherit; touch-action:manipulation; }
.smart-tool-intro { display:flex; align-items:center; gap:9px; margin:2px 0 12px; }.smart-tool-intro>span { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; background:linear-gradient(135deg,var(--st-brand),var(--st-deep)); color:#fff; font-size:25px; }
.smart-tool-intro h2 { margin:0; font-size:17px; }.smart-tool-intro p { margin:4px 0 0; font-size:11px; color:var(--st-muted); }
.smart-tool-controls,.smart-pair-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; align-items:end; }.smart-tool-controls { margin-bottom:12px; }
.smart-play-tool label { display:block; min-width:0; font-size:12px; font-weight:700; }.smart-play-tool input:not([type=checkbox]),.smart-play-tool textarea,.smart-play-tool select,.smart-fixed-type { display:block; width:100%; min-width:0; min-height:46px; margin-top:5px; padding:9px 11px; border:1px solid var(--st-line); border-radius:12px; background:var(--st-bg); color:var(--st-ink); font-size:17px; }
.smart-fixed-type { display:flex; align-items:center; font-size:14px; }.smart-play-tool textarea { resize:vertical; font-size:15px; }
.smart-play-tool input:focus,.smart-play-tool textarea:focus { outline:2px solid var(--st-brand); outline-offset:1px; }
.smart-tool-builder { padding:12px; border:1px solid var(--st-line); border-radius:16px; background:var(--st-bg); box-shadow:0 3px 10px #163c5010; }.smart-tool-builder>label,.smart-tool-builder>.smart-pair-fields { margin-bottom:10px; }.smart-tool-builder p { color:var(--st-muted); font-size:12px; line-height:1.5; }
.smart-digit-picker { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; margin:8px 0 12px; }.smart-digit-picker button { min-height:45px; font-size:22px; font-weight:800; }
.smart-digit-picker button,.smart-number-grid>button { min-width:0; border:1px solid var(--st-line); border-radius:10px; padding:7px 3px; background:linear-gradient(145deg,var(--st-bg),var(--st-soft)); color:var(--st-ink); cursor:pointer; }
.smart-play-tool button[aria-pressed=true] { color:#fff!important; border-color:var(--st-deep); background:linear-gradient(125deg,var(--st-brand),var(--st-deep)); }
.smart-check { display:flex!important; align-items:center; gap:8px; font-size:12px!important; margin:10px 0!important; }.smart-check input { width:20px; height:20px; margin:0; accent-color:var(--st-deep); }
.smart-primary,.smart-secondary { width:100%; min-height:44px; border:1px solid var(--st-line); border-radius:11px; padding:8px; font-size:12px!important; font-weight:750!important; cursor:pointer; }.smart-primary { background:linear-gradient(125deg,var(--st-brand),var(--st-deep)); color:#fff; }.smart-secondary { background:var(--st-soft); color:var(--st-ink); }
.smart-number-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; margin:10px 0; }.smart-number-grid>button { position:relative; min-height:43px; font-size:20px; font-weight:750; }.smart-number-grid small { position:absolute; top:1px; right:4px; font-size:10px; color:#c32654; }
.smart-favorites { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }.smart-favorites>div,.smart-saved-groups>div { display:flex; border:1px solid var(--st-line); border-radius:10px; overflow:hidden; }.smart-favorites button,.smart-saved-groups button { border:0; background:var(--st-soft); color:var(--st-ink); min-height:42px; padding:6px; cursor:pointer; }.smart-favorites button:first-child,.smart-saved-groups button:first-child { flex:1; min-width:0; font-size:19px; font-weight:750; }.smart-favorites button:last-child,.smart-saved-groups button:last-child { width:27px; font-size:20px; color:#c32654; }
.smart-saved-groups { display:grid; gap:8px; margin-top:12px; }.smart-saved-groups strong,.smart-saved-groups small { display:block; text-align:left; overflow-wrap:anywhere; }.smart-saved-groups strong { font-size:13px; }.smart-saved-groups small { font-size:10px; margin-top:3px; color:var(--st-muted); }
.smart-selection-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:13px 0 7px; font-size:13px; }.smart-selection-heading button,.smart-text-button { border:0; background:transparent; color:var(--st-ink); font-size:11px!important; text-decoration:underline; padding:8px 4px; cursor:pointer; }
.smart-empty { padding:12px; border:1px dashed var(--st-line); border-radius:12px; font-size:12px; line-height:1.5; color:var(--st-muted); }.smart-feedback { font-size:12px; line-height:1.5; color:#c32654; }.smart-feedback:empty { display:none; }.smart-rate-note { font-size:10px; color:var(--st-muted); }
.smart-play-tool button:focus-visible,.smart-tool-card:focus-visible { outline:3px solid #ffc342; outline-offset:2px; }
.mobile-shell .mp-shell:has(.smart-play-tool) .mp-bottom-bar { background:var(--st-bg); color:var(--st-ink); }.mobile-shell .mp-shell:has(.smart-play-tool) .mp-submit-btn { background:linear-gradient(125deg,var(--st-brand),var(--st-deep)); min-height:44px; }
