/* SmartTasks rebrand. All colors inherit from the SmartKit shell so the tool
   is ready for the site's future dark theme. */
.st-app {
    display: flex;
    min-height: min(720px, calc(100dvh - 150px));
    height: calc(100dvh - 150px);
    min-width: 0;
    position: relative;
    overflow: hidden;
    background: var(--sk-bg);
    color: var(--sk-text);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius);
    box-shadow: var(--sk-shadow);
}
.st-app, .st-app * { box-sizing: border-box; }
.st-app button, .st-app input, .st-app select, .st-app textarea { font: inherit; }
.st-app .text-primary { color: var(--sk-primary) !important; }
.st-app .text-success { color: var(--sk-green) !important; }
.st-app .text-warning { color: var(--sk-warning, var(--sk-primary)) !important; }
.st-app .text-danger { color: var(--sk-danger) !important; }
.st-app .text-muted { color: var(--sk-text-muted) !important; }
.w-100 { width: 100%; }
.mt-2 { margin-top: .5rem; }
.mt-4 { margin-top: 1.5rem; }
.mb-2 { margin-bottom: .5rem; }
.d-flex { display: flex; }
.align-items-center { align-items: center; }
.justify-content-between { justify-content: space-between; }
.flex-grow-1 { flex-grow: 1; min-width: 0; }

.st-sidebar { width: 248px; flex: 0 0 248px; display:flex; flex-direction:column; min-height:0; overflow:hidden; background:var(--sk-surface); border-right:1px solid var(--sk-border); z-index:20; }
.st-sidebar-header { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 16px; border-bottom:1px solid var(--sk-border-soft); }
.st-sidebar-header h3 { margin:0; color:var(--sk-text); font-size:1.05rem; font-weight:800; display:flex; align-items:center; gap:9px; }
.st-nav-section { flex:0 0 auto; padding:11px 12px 0; min-height:0; overflow:visible; }
.st-nav-section h4 { margin:0 0 9px 8px; color:var(--sk-text-faint); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; }
.st-nav-list { list-style:none; padding:0; margin:0; }
.st-nav-list li { display:flex; align-items:center; gap:10px; min-width:0; padding:7px 12px; margin-bottom:1px; border-radius:var(--sk-radius-sm); color:var(--sk-text-muted); font-size:.9rem; font-weight:600; cursor:pointer; transition:background .15s,color .15s; }
.st-nav-list li:hover { background:var(--sk-surface-2); color:var(--sk-text); }
.st-nav-list li.active { background:var(--sk-primary-soft); color:var(--sk-primary); }
.st-nav-list li i { width:17px; text-align:center; flex-shrink:0; }
.st-sidebar-footer { flex:0 0 auto; margin-top:auto; padding:10px 12px 12px; border-top:1px solid var(--sk-border-soft); }

.st-main { display:flex; flex:1 1 auto; flex-direction:column; min-width:0; min-height:0; background:var(--sk-bg); }
.st-header { display:flex; align-items:center; gap:10px; min-height:64px; padding:12px 20px; background:var(--sk-surface); border-bottom:1px solid var(--sk-border); }
.st-header h2 { flex:1; min-width:0; margin:0; color:var(--sk-text); font-size:1.3rem; font-weight:800; }
.st-header-actions { display:flex; align-items:center; gap:6px; }
#openSidebar { display:none; }
.st-search-bar { display:flex; align-items:center; gap:10px; padding:10px 20px; background:var(--sk-surface); border-bottom:1px solid var(--sk-border); }
.st-search-bar input { flex:1; min-width:0; padding:10px 14px; border:1px solid var(--sk-border); border-radius:10px; background:var(--sk-surface-2); color:var(--sk-text); outline:none; }
.st-search-bar input:focus { border-color:var(--sk-primary); box-shadow:0 0 0 3px var(--sk-primary-soft); }
.st-task-list { flex:1; min-height:0; overflow-y:auto; padding:20px; }
.st-empty-state { padding:54px 20px; text-align:center; color:var(--sk-text-muted); }
.st-empty-state i { display:block; margin-bottom:12px; color:var(--sk-primary); font-size:2.5rem; opacity:.65; }

.st-task { display:flex; align-items:flex-start; gap:12px; position:relative; min-width:0; padding:15px 16px 15px 18px; margin-bottom:10px; overflow:hidden; border:1px solid var(--sk-border); border-radius:var(--sk-radius-sm); background:var(--sk-surface); box-shadow:var(--sk-shadow); cursor:pointer; transition:border-color .15s,box-shadow .15s,transform .15s; }
.st-task:hover { border-color:var(--sk-primary); box-shadow:var(--sk-shadow-lg); transform:translateY(-1px); }
.st-task-priority-line { position:absolute; inset:0 auto 0 0; width:4px; }
.p1 { background:var(--sk-danger); }.p2 { background:var(--sk-warning, var(--sk-primary)); }.p3 { background:var(--sk-primary); }.p4 { background:var(--sk-text-faint); }
.st-checkbox { width:22px; height:22px; flex:0 0 22px; margin-top:2px; border:2px solid var(--sk-border); border-radius:50%; background:transparent; color:var(--sk-surface); cursor:pointer; }
.st-checkbox:hover { border-color:var(--sk-primary); }
.st-task.completed .st-checkbox { position:relative; border-color:var(--sk-primary); background:var(--sk-primary); }
.st-task.completed .st-checkbox::after { content:'✓'; position:absolute; inset:0; display:grid; place-items:center; color:var(--sk-surface); font-size:.75rem; font-weight:800; }
.st-task-content { flex:1; min-width:0; }
.st-task-title { margin:0 0 6px; overflow:hidden; color:var(--sk-text); font-size:1rem; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.st-task.completed .st-task-title { color:var(--sk-text-muted); text-decoration:line-through; }
.st-task-meta { display:flex; flex-wrap:wrap; align-items:center; gap:7px 14px; color:var(--sk-text-muted); font-size:.78rem; }
.st-task-meta span { min-width:0; }
.st-task-meta i { margin-right:4px; }
.st-task-star { flex:0 0 auto; padding:4px; color:var(--sk-warning, var(--sk-primary)); cursor:pointer; }
.st-btn-icon { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; padding:0; border:1px solid transparent; border-radius:10px; background:transparent; color:var(--sk-text-muted); cursor:pointer; }
.st-btn-icon:hover { border-color:var(--sk-border); background:var(--sk-surface-2); color:var(--sk-text); }
.st-btn-icon.small { width:30px; height:30px; font-size:.85rem; }
.st-btn-primary, .st-btn-outline, .st-btn-sm { display:inline-flex; align-items:center; justify-content:center; gap:7px; border-radius:10px; font-weight:700; cursor:pointer; }
.st-btn-primary { padding:10px 17px; border:1px solid var(--sk-primary); background:var(--sk-primary); color:var(--sk-surface); }
.st-btn-primary:hover { background:var(--sk-primary-600); }
.st-btn-outline { padding:9px 14px; border:1px solid var(--sk-border); background:var(--sk-surface); color:var(--sk-text); text-decoration:none; }
.st-btn-outline:hover { border-color:var(--sk-primary); background:var(--sk-primary-soft); }
.st-btn-text { padding:10px; border:0; background:transparent; color:var(--sk-text-muted); font-weight:700; cursor:pointer; }
.st-btn-text.text-danger { color:var(--sk-danger) !important; }
.st-btn-sm { margin-left:34px; padding:7px 12px; border:1px solid var(--sk-border); background:var(--sk-surface-2); color:var(--sk-text); font-size:.82rem; }

.st-bottom-bar { position:fixed; right:22px; bottom:calc(22px + env(safe-area-inset-bottom, 0px)); z-index:30; }
.st-fab { display:grid; place-items:center; width:56px; height:56px; border:0; border-radius:50%; background:var(--sk-primary); color:var(--sk-surface); box-shadow:0 10px 24px color-mix(in srgb,var(--sk-primary) 30%,transparent); font-size:1.25rem; cursor:pointer; }
.st-fab:hover { background:var(--sk-primary-600); transform:translateY(-1px); }
.st-overlay { position:fixed; inset:0; z-index:80; background:color-mix(in srgb,var(--sk-text) 42%,transparent); opacity:0; pointer-events:none; transition:opacity .2s; }
.st-overlay.active { opacity:1; pointer-events:auto; }

.st-bottom-sheet { position:fixed; inset:auto 0 -100% 0; z-index:90; display:flex; flex-direction:column; height:min(85dvh,760px); border:1px solid var(--sk-border); border-radius:20px 20px 0 0; background:var(--sk-surface); box-shadow:var(--sk-shadow-lg); transition:bottom .25s ease; }
.st-bottom-sheet.active { bottom:0; }
.st-sheet-handle { width:42px; height:4px; margin:10px auto; border-radius:99px; background:var(--sk-border); }
.st-sheet-content { display:flex; flex:1; min-height:0; flex-direction:column; overflow:hidden; }
.st-sheet-header { padding:14px 20px; border-bottom:1px solid var(--sk-border); }
.st-title-input { flex:1; min-width:0; margin-left:12px; padding:8px 0; border:0; outline:none; background:transparent; color:var(--sk-text); font-size:1.2rem; font-weight:800; }
.st-sheet-body { flex:1; min-height:0; overflow-y:auto; padding:20px; }
.st-sheet-footer { display:flex; justify-content:space-between; gap:12px; padding:14px 20px; border-top:1px solid var(--sk-border); background:var(--sk-surface); }
.st-form-group { position:relative; margin-bottom:16px; }
.st-form-group > i { position:absolute; top:12px; left:13px; z-index:1; color:var(--sk-text-muted); }
.st-form-group input, .st-form-group select, .st-form-group textarea { width:100%; min-width:0; padding:10px 12px 10px 38px; border:1px solid var(--sk-border); border-radius:10px; outline:none; background:var(--sk-surface-2); color:var(--sk-text); }
.st-form-group textarea { min-height:90px; resize:vertical; }
.st-form-group input:focus, .st-form-group select:focus, .st-form-group textarea:focus { border-color:var(--sk-primary); box-shadow:0 0 0 3px var(--sk-primary-soft); }
.st-form-row { display:flex; gap:14px; }
.st-form-group.half { flex:1; min-width:0; }

/* Public landing page */
.stlp { width:min(1120px,100%); margin:0 auto; padding:0 16px; overflow:hidden; }
.stlp-hero { position:relative; isolation:isolate; overflow:hidden; padding:56px 16px 40px; border:1px solid var(--sk-border); border-radius:24px; background:var(--sk-surface); text-align:center; }
.stlp-hero-bg { position:absolute; inset:0; z-index:-1; background:linear-gradient(135deg,var(--sk-primary-soft),var(--sk-surface),var(--sk-primary-soft)); opacity:.9; }
.stlp-lines { position:absolute; inset:0; z-index:-1; opacity:.24; }
.stlp-lines path { fill:none; stroke:var(--sk-primary); stroke-width:1.5; stroke-dasharray:12 10; animation:stlpFlow 6s linear infinite; }
.stlp-lines path:nth-child(2){animation-duration:8s;opacity:.7}.stlp-lines path:nth-child(3){animation-duration:10s;opacity:.5}
@keyframes stlpFlow { to { stroke-dashoffset:-220px; } }
.stlp-kicker { display:inline-flex; align-items:center; gap:8px; margin-bottom:16px; padding:6px 14px; border:1px solid var(--sk-border); border-radius:999px; background:var(--sk-surface); color:var(--sk-primary); font-size:.82rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.stlp-dot { width:8px; height:8px; border-radius:50%; background:var(--sk-primary); }
.stlp-hero h1 { max-width:760px; margin:0 auto 16px; color:var(--sk-text); font-size:clamp(2rem,6vw,3.6rem); line-height:1.14; font-weight:800; letter-spacing:-.02em; }
.stlp-hero h1 span { color:var(--sk-primary); }.stlp-hero p.lede { max-width:600px; margin:0 auto 28px; color:var(--sk-text-muted); font-size:1.1rem; line-height:1.7; }
.stlp-actions { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }.stlp-btn { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:12px 24px; border-radius:10px; font-weight:700; text-decoration:none; }.stlp-btn-primary { background:var(--sk-primary); color:var(--sk-surface); }.stlp-btn-outline { border:1px solid var(--sk-border); background:var(--sk-surface); color:var(--sk-text); }
.stlp-trust { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:30px 0 8px; }.stlp-trust-item,.stlp-flow .step { border:1px solid var(--sk-border); border-radius:12px; background:var(--sk-surface); color:var(--sk-text-muted); font-weight:700; }.stlp-trust-item { padding:14px; text-align:center; }.stlp-flow { display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; margin:36px 0; }.stlp-flow .step { padding:9px 16px; font-size:.85rem; }.stlp-flow .arrow { color:var(--sk-text-faint); }.stlp-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr)); gap:18px; margin:8px 0 44px; }.stlp-card { padding:24px; border:1px solid var(--sk-border); border-radius:var(--sk-radius); background:var(--sk-surface); }.stlp-card h3 { margin:0 0 10px; color:var(--sk-text); font-size:1.1rem; }.stlp-card p { margin:0; color:var(--sk-text-muted); line-height:1.6; }.stlp-strip { margin-bottom:44px; padding:40px 24px; border-radius:var(--sk-radius); background:var(--sk-primary-soft); text-align:center; }.stlp-strip h2 { margin:0 0 12px; color:var(--sk-text); }.stlp-strip p { max-width:560px; margin:0 auto 22px; color:var(--sk-text-muted); line-height:1.7; }
@media (prefers-reduced-motion:reduce){.stlp-lines path{animation:none}.stlp-hero-bg{animation:none}}
.st-settings { width:min(800px,100%); margin:0 auto; padding:8px 0 28px; }
.st-settings-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; }
.st-settings-head h1 { margin:0; color:var(--sk-text); font-size:clamp(1.35rem,3vw,1.85rem); font-weight:800; }
.st-settings-head h1 i { margin-right:8px; color:var(--sk-primary); }
.st-settings-card { padding:24px; border:1px solid var(--sk-border); border-radius:var(--sk-radius); background:var(--sk-surface); box-shadow:var(--sk-shadow); }
.st-settings-card h3 { margin:0 0 20px; color:var(--sk-text); font-size:1.1rem; }
.st-settings-field { margin-bottom:20px; }
.st-settings-field > label:not(.st-toggle-label) { display:block; margin-bottom:7px; color:var(--sk-text); font-size:.88rem; font-weight:700; }
.st-toggle-label { display:flex; align-items:center; gap:10px; color:var(--sk-text); cursor:pointer; }
.st-toggle-label input { width:18px; height:18px; accent-color:var(--sk-primary); }
.st-settings-help { display:block; margin:7px 0 0 28px; }
.st-settings-input { display:block; width:100%; min-height:92px; padding:11px 13px; border:1px solid var(--sk-border); border-radius:10px; outline:none; resize:vertical; background:var(--sk-surface-2); color:var(--sk-text); }
.st-settings-input:focus { border-color:var(--sk-primary); box-shadow:0 0 0 3px var(--sk-primary-soft); }

/* Keep the global SmartKit navigation fixed while this tool's workspace
   scrolls independently. Mobile keeps the shell's drawer behavior. */
@media (min-width:901px) {
    .sk-app .sk-sidebar { position:fixed !important; inset:0 auto 0 0 !important; height:100vh !important; height:100dvh !important; overflow-y:auto !important; }
    .sk-app .sk-main { margin-left:var(--sk-sidebar-w); min-width:0; }
}
@media (max-width:900px) {
    .sk-app .sk-main { margin-left:0; }
}

@media (min-width:769px) {
    .st-bottom-sheet { right:20px; left:auto; bottom:20px; width:min(500px,calc(100% - 40px)); height:min(calc(100dvh - 170px),760px); border-radius:16px; transform:translateX(120%); transition:transform .25s ease; }
    .st-bottom-sheet.active { bottom:20px; transform:translateX(0); }
    .st-overlay { display:none; }
    #closeSidebar { display:none; }
}
@media (max-width:900px) {
    html, body { max-width:100%; overflow-x:hidden; }
    .sk-body, .sk-app, .sk-main, .sk-content { width:100%; max-width:100%; min-width:0; overflow-x:hidden; }
    .sk-main, .sk-content, .st-app { touch-action:pan-y; }
    .st-app { min-height:calc(100dvh - 130px); height:calc(100dvh - 130px); }
    .st-sidebar { position:fixed; inset:0 auto 0 0; z-index:90; width:min(340px,calc(100vw - 40px)); max-width:100%; border-radius:0 20px 20px 0; padding-bottom:env(safe-area-inset-bottom, 0px); transform:translateX(-105%); box-shadow:var(--sk-shadow-lg); transition:transform .22s ease; }
    .st-sidebar.active { transform:translateX(0); }
    #openSidebar { display:inline-flex; }
    .st-task-list { padding:16px; }
}
@media (max-width:600px) {
    .st-bottom-sheet { left:0; right:0; width:100%; max-width:100%; touch-action:pan-y; }
    .st-sheet-content, .st-sheet-body { max-width:100%; min-width:0; }
    .st-app { min-height:calc(100dvh - 112px); height:calc(100dvh - 112px); border-radius:12px; }
    .st-header { min-height:58px; padding:10px 12px; }.st-header h2{font-size:1.1rem}.st-search-bar{padding:9px 12px}.st-task-list{padding:12px}.st-task{padding:13px 12px 13px 15px}.st-task-meta{gap:6px 10px}.st-title-input{font-size:1.05rem}.st-sheet-body{padding:16px}.st-sheet-footer{padding:12px 16px}.st-form-row{flex-direction:column;gap:0}.st-bottom-bar{right:14px;bottom:calc(14px + env(safe-area-inset-bottom, 0px))}.st-fab{width:52px;height:52px}.stlp{padding:0 10px}.stlp-hero{padding:40px 14px 28px}.stlp-actions{flex-direction:column}.stlp-btn{width:100%}.stlp-trust{grid-template-columns:1fr}.stlp-grid{grid-template-columns:1fr}.st-settings{padding-top:0}.st-settings-head{align-items:stretch;flex-direction:column}.st-settings-head .btn,.st-settings-head .st-btn-outline{width:100%}
}