/* SPDX-License-Identifier: GPL-3.0-or-later */
/* Native Home and library preview. Palette and controls mirror the SwiftUI app. */
.app-window { height:752px;display:grid;grid-template-columns:188px minmax(0,1fr);background:var(--app-canvas);border:1px solid #0c0d0e;border-radius:15px;overflow:hidden;color:var(--app-text);box-shadow:0 24px 60px -30px #2528235e;text-align:left;font-family:var(--sans);isolation:isolate }
.app-sidebar { position:relative;background:var(--app-sidebar);border-right:1px solid var(--app-line);padding:21px 13px;display:flex;flex-direction:column }
.app-traffic { display:flex;gap:7px;padding:0 7px 26px }
.app-traffic i { width:10px;height:10px;background:#ff5d55;border-radius:50%;box-shadow:inset 0 0 0 1px #0001 }
.app-traffic i:nth-child(2) { background:#e5bc45 }
.app-traffic i:nth-child(3) { background:#5ab55d }
.app-identity { display:flex;align-items:center;margin-bottom:29px;gap:5px }
.app-identity>img { width:43px;height:43px }
.app-identity>div { font:normal 23px var(--serif);letter-spacing:-.5px }
.app-identity small { display:block;font:normal 8px var(--sans);letter-spacing:0;margin-top:4px;color:var(--app-secondary) }
.app-sidebar nav { display:flex;flex-direction:column;gap:6px }
.app-nav { display:flex;align-items:center;gap:11px;background:transparent;color:#c6c7ca;border-radius:8px;text-align:left;font-size:12px;padding:11px 13px;min-height:39px }
.app-nav svg { width:16px;height:16px }
.app-nav.selected { background:#ff7d4f15;color:var(--app-accent) }
.app-nav:hover { background:#ffffff08 }
.app-nav.selected:hover { background:#ff7d4f20 }
.app-sidebar-note { display:flex;align-items:flex-start;gap:10px;margin-top:37px;padding:19px 12px;border-top:1px solid #ffffff0b;color:#838790 }
.app-sidebar-note svg { width:14px;height:14px;margin-top:3px }
.app-sidebar-note p { font-size:10px;line-height:1.7 }
.app-sidebar-footer { font-size:8px;color:#777b83;margin-top:auto;padding:0 10px }
.app-main { min-height:0;display:flex;flex-direction:column;min-width:0 }
.app-titlebar { height:47px;flex-shrink:0;padding:0 25px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--app-line);font-size:11px;color:#b8bac0 }
.app-preview-label { font-size:8px;letter-spacing:.02em;background:#ffffff07;border:1px solid #ffffff0b;border-radius:5px;padding:4px 7px;color:#90949c }
.app-page { padding:23px 25px;min-height:0;flex:1;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#4a4c51 transparent }
.app-home { padding-bottom:26px }
.app-section-title { display:flex;justify-content:space-between;align-items:center;margin:22px 0 13px }
.app-section-title h4 { font:normal 20px var(--serif);margin:0;letter-spacing:-.3px }
.app-section-title>button { background:transparent;color:var(--app-accent);font-size:10px;padding:7px }
.app-section-title>button>span { margin-left:7px }
.home-tools { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px }
.home-tool { padding:15px;background:var(--app-card);border:1px solid var(--app-line);border-radius:16px;min-width:0 }
.home-tool-top { display:flex;align-items:center;gap:10px }
.tool-icon { flex-shrink:0;width:32px;height:32px;border-radius:9px;background:#ffffff06;display:grid;place-items:center;color:#dfe1e5 }
.tool-icon svg { width:19px;height:19px }
.home-tool h5 { font-size:12px;font-weight:600;margin:0;line-height:1.4;flex:1 }
.app-switch { width:30px;height:18px;background:#5f6269;flex-shrink:0;border-radius:20px;padding:2px;transition:background .15s;position:relative }
.app-switch>span { display:block;width:14px;height:14px;position:absolute;top:2px;left:2px;background:#fff;border-radius:50%;box-shadow:0 1px 2px #0003;transition:transform .15s }
.app-switch[aria-checked=true] { background:var(--app-accent) }
.app-switch[aria-checked=true]>span { transform:translateX(12px) }
.app-switch:before { content:'';position:absolute;inset:-7px -4px }
.home-tool>p { font-size:11px;line-height:1.5;min-height:34px;color:var(--app-secondary);margin-top:10px }
.home-tool-actions { display:flex;justify-content:space-between;align-items:center;margin-top:10px;min-height:25px }
.home-tool-actions>button { color:var(--app-accent);background:transparent;font-size:11px;padding:3px 0 }
.home-tool-actions>button>span { margin-left:6px }
.home-tool-actions>span { font-size:10px;color:var(--app-secondary) }
.home-tool-actions .tool-settings { width:26px;height:26px;color:#9da1a9;display:grid;place-items:center;border-radius:5px }
.tool-settings svg { width:15px;height:15px }
.home-tool-actions .tool-settings:hover { background:#ffffff09;color:#eee }
.app-setups { padding:16px 19px;background:var(--app-card);border:1px solid var(--app-line);border-radius:15px;margin-top:17px }
.app-setups summary { cursor:pointer;position:relative;list-style:none;padding-right:23px }
.app-setups summary::-webkit-details-marker { display:none }
.app-setups summary:after { content:'›';position:absolute;right:0;top:5px;font-size:19px;color:#b3b7bf;transform:rotate(90deg) }
.app-setups[open] summary:after { transform:rotate(-90deg) }
.app-setups strong { font-size:12px;font-weight:500;display:block }
.app-setups summary>span { font-size:10px;color:var(--app-secondary);display:block;margin-top:5px;line-height:1.5 }
.app-setups>div { display:flex;gap:9px;margin-top:13px }
.app-setups button { background:#ffffff0a;border:1px solid #ffffff0d;padding:6px 11px;border-radius:6px;color:#e2e4e8;font-size:10px }
.app-setups button:hover { background:#ffffff13 }
.app-library { padding:0;overflow:hidden;display:flex;flex-direction:column }
.library-fixed { padding:25px 25px 0;background:var(--app-canvas);flex-shrink:0 }
.library-fixed h3 { font:normal 29px var(--serif);letter-spacing:-.5px;margin-bottom:9px }
.library-fixed>p { font-size:11px;line-height:1.6;color:var(--app-secondary);max-width:550px }
.library-search { margin-top:22px;background:#ffffff05;border:1px solid #ffffff11;border-radius:8px;display:flex;align-items:center;gap:9px;padding:9px 12px }
.library-search>span svg { width:15px;height:15px;color:#90949c }
.library-search input { border:0;background:transparent;color:var(--app-text);width:100%;padding:0;font-size:11px;outline-offset:4px }
.library-search input::placeholder { color:#9498a1 }
.library-search kbd { font-size:11px;color:#797e89;font-family:var(--sans) }
.library-controls { display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px }
.library-collections { display:flex;padding:3px;gap:3px;background:#0c0d0f;border:1px solid #ffffff0d;border-radius:7px }
.library-collections button { padding:6px 10px;border-radius:5px;font-size:10px;background:transparent;color:#9fa3ab;white-space:nowrap }
.library-collections button[aria-pressed=true] { background:#323438;color:var(--app-text) }
.library-controls select { background:#24262a;color:#d6d9df;border:1px solid #ffffff13;border-radius:6px;font-size:10px;padding:7px 8px;max-width:163px;cursor:pointer;min-height:29px }
.library-controls select:disabled { opacity:.4;cursor:default }
.library-result-summary { font-size:9px;line-height:1.4;color:#9ba0aa;padding:15px 1px 12px }
.library-scroll { overflow-y:auto;min-height:0;padding:0 25px 25px;scrollbar-width:thin;scrollbar-color:#4a4c51 transparent;overscroll-behavior:contain }
.library-tool { display:flex;gap:12px;align-items:center;min-height:74px;padding:14px 15px;background:var(--app-card);border-left:1px solid var(--app-line);border-right:1px solid var(--app-line);position:relative }
.library-tool:first-child { border-top:1px solid var(--app-line);border-radius:15px 15px 0 0 }
.library-tool:last-child { border-bottom:1px solid var(--app-line);border-radius:0 0 15px 15px }
.library-tool:only-child { border-radius:15px }
.library-tool+.library-tool:before { content:'';height:1px;position:absolute;left:59px;right:15px;top:0;background:var(--app-line) }
.library-tool>div { flex:1;min-width:0 }
.library-tool h5 { margin:0 0 5px;font-size:12px;font-weight:500 }
.library-tool p { font-size:10px;line-height:1.5;color:var(--app-secondary) }
.library-detail { background:transparent;border-radius:5px;font-size:16px;color:#969ca5;padding:4px;flex-shrink:0 }
.library-detail:hover { color:var(--app-text) }
.library-empty { text-align:center;padding:40px 24px 55px }
.library-empty>img { margin:0 auto 17px }
.library-empty h4 { font:normal 22px var(--serif);margin:0 0 11px }
.library-empty p { font-size:11px;line-height:1.6;color:var(--app-secondary);max-width:300px;margin:auto }
.library-empty button { font-size:11px;color:var(--app-accent);padding:9px 14px;background:#ff7d4f10;border-radius:7px;margin-top:17px }
.tool-dialog { color:var(--app-text);background:var(--app-card);border:1px solid #ffffff24;border-radius:18px;padding:26px;max-width:450px;width:calc(100% - 40px);box-shadow:0 20px 100px #0008;overflow:auto;max-height:calc(100vh - 60px) }
.tool-dialog::backdrop { background:#12161987;backdrop-filter:blur(4px) }
.dialog-top { display:flex;justify-content:space-between;align-items:center;margin-bottom:22px }
.dialog-top>span { font-size:8px;letter-spacing:.12em;color:#959ba5 }
.dialog-top>button { background:#ffffff07;color:#cbd0d8;font-size:21px;width:30px;height:30px;border-radius:6px }
.tool-dialog #dialog-icon { color:#c7cbd3;margin-bottom:15px }
.tool-dialog #dialog-icon svg { width:33px;height:33px }
.tool-dialog h3 { font:normal 29px var(--serif);margin-bottom:16px }
.tool-dialog #dialog-body>p { font-size:13px;line-height:1.75;color:#c1c6ce }
.dialog-state { display:flex;justify-content:space-between;align-items:center;font-size:11px;margin-top:23px;padding:12px 0;border-top:1px solid #ffffff10;border-bottom:1px solid #ffffff10;color:var(--app-accent);gap:20px }
.dialog-state>span { font-size:9px;color:#969ea9 }
.dialog-disclaimer { font-size:10px;line-height:1.7;color:#949ca9;margin-top:24px }
.tool-dialog ul { padding-left:19px;font-size:12px;color:#c7cbd3;line-height:1.9 }
.dialog-primary { margin-top:8px;padding:10px 15px;border-radius:7px;background:var(--app-accent);color:#27190f;font-size:12px;font-weight:600 }
.app-window button:focus-visible,.app-window input:focus-visible,.app-window select:focus-visible,.tool-dialog button:focus-visible { outline-color:var(--app-accent) }
@media(max-width:1000px) {
.app-sidebar { padding-inline:10px }
.app-identity>div { font-size:20px }
.app-identity small { font-size:7px }
.app-page { padding-inline:20px }
.library-fixed { padding-inline:20px }
.library-scroll { padding-inline:20px }
.home-tool { padding:13px }
.home-tool-top { gap:8px }
.home-tool h5 { font-size:11px }
.app-window { grid-template-columns:166px minmax(0,1fr) }
.library-collections button { padding:6px 8px;font-size:9px }
.library-controls select { max-width:130px;font-size:9px }
}
@media(max-width:760px) {
.app-window { grid-template-columns:139px minmax(0,1fr);height:787px }
.app-identity>div { font-size:20px }
.app-identity>img { display:none }
.app-identity { padding:4px 8px 0 }
.app-identity small { font-size:7px }
.app-nav { font-size:11px;padding:10px;gap:9px }
.app-page { padding:18px }
.app-library { padding:0 }
.home-tools { gap:10px }
.home-tool { padding:13px }
.home-tool h5 { font-size:10px }
.home-tool-top { flex-wrap:wrap;column-gap:7px;row-gap:8px }
.home-tool-top>.tool-icon { width:28px;height:28px }
.home-tool-top>.app-switch { margin-left:auto }
.home-tool>p { font-size:10px;min-height:43px }
.app-section-title h4 { font-size:18px }
.library-fixed { padding:20px 18px 0 }
.library-scroll { padding:0 18px 20px }
.library-fixed>p { font-size:10px }
.library-controls { align-items:flex-start;flex-direction:column;gap:8px }
.library-controls select { max-width:none }
.library-tool { gap:8px;padding:13px 11px }
.library-tool .tool-icon { width:28px;height:28px }
.library-tool h5 { font-size:11px }
.library-tool p { font-size:9px }
.library-detail { font-size:14px;padding:2px }
.library-tool .app-switch { width:28px;height:17px }
.library-tool .app-switch>span { width:13px;height:13px }
.library-tool .app-switch[aria-checked=true]>span { transform:translateX(11px) }
.app-sidebar-footer { font-size:7px;padding-inline:5px }
}
@media(max-width:520px) {
.app-window { display:flex;flex-direction:column;height:743px;border-radius:12px }
.app-sidebar { padding:12px 13px;border-bottom:1px solid var(--app-line);border-right:0;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:13px;flex-shrink:0 }
.app-traffic,.app-sidebar-note,.app-sidebar-footer,.app-identity small { display:none }
.app-identity { padding:0;margin:0 }
.app-identity>div { font-size:19px }
.app-sidebar nav { flex-direction:row;gap:3px }
.app-nav { font-size:10px;padding:7px 9px;gap:6px;min-height:31px;border-radius:6px }
.app-nav svg { width:13px;height:13px }
.app-main { flex:1 }
.app-titlebar { height:37px;padding-inline:16px;font-size:9px }
.app-preview-label { font-size:7px;padding:3px 5px }
.app-page { padding:15px }
.app-home { padding-bottom:19px }
.app-section-title { margin-top:18px;margin-bottom:12px }
.app-section-title h4 { font-size:18px }
.app-section-title>button { font-size:9px }
.home-tools { grid-template-columns:1fr;gap:11px }
.home-tool { padding:14px }
.home-tool-top { flex-wrap:nowrap;gap:9px }
.home-tool h5 { font-size:12px }
.home-tool-top>.tool-icon { width:32px;height:32px }
.home-tool>p { font-size:11px;min-height:0;line-height:1.6;margin-top:9px }
.home-tool-actions { margin-top:10px }
.home-tool-actions>button { font-size:11px }
.app-switch { width:32px;height:19px }
.app-switch>span { width:15px;height:15px }
.app-switch[aria-checked=true]>span { transform:translateX(13px) }
.app-library { padding:0 }
.library-fixed { padding:18px 15px 0 }
.library-fixed h3 { font-size:27px }
.library-fixed>p { font-size:10px }
.library-search { margin-top:17px;padding:10px;font-size:11px }
.library-controls { gap:9px;margin-top:12px }
.library-collections { width:100% }
.library-collections button { flex:1;padding:7px 9px;font-size:10px }
.library-controls>label { width:100% }
.library-controls select { width:100%;font-size:10px }
.library-result-summary { padding:12px 1px 11px;font-size:8px }
.library-scroll { padding:0 15px 19px }
.library-tool { padding:13px 11px;min-height:80px;gap:9px }
.library-tool>.tool-icon { width:29px;height:29px }
.library-tool>.tool-icon svg { width:17px;height:17px }
.library-tool h5 { font-size:11px }
.library-tool p { font-size:9px;line-height:1.5 }
.library-detail { display:none }
.tool-dialog { padding:21px }
.tool-dialog h3 { font-size:27px }
.tool-dialog #dialog-body>p { font-size:12px }
.tool-dialog .dialog-state { font-size:10px }
.tool-dialog .dialog-state>span { font-size:8px }
}
.library-config { color:#9399a3;border:0;background:none;font-size:20px;padding:3px;line-height:1;border-radius:4px }
.library-config:hover { color:var(--app-text) }
@media(max-width:520px) {
.library-config { display:none }
}
.library-collections button:disabled { opacity:.45;cursor:default }
@media(max-width:1000px) {
.app-library { padding:0 }
}
/* Current native Home: two featured tools, then four compact quick actions. */
.home-intro {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 0 19px}
.home-intro>div {min-width:0}
.home-intro>div>p {font-size:8px;letter-spacing:1.8px;color:var(--app-secondary);font-weight:600;margin-bottom:8px}
.home-intro h3 {font:normal 28px/1.15 var(--serif);letter-spacing:-.5px;margin-bottom:7px}
.home-intro>div>span {font-size:12px;line-height:1.6;color:var(--app-secondary)}
.home-intro>img {width:72px;height:72px;flex-shrink:0}
.home-featured {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.featured-tool {padding:16px;border-radius:16px}
.featured-description {display:flex;align-items:center;gap:12px;margin-top:12px;min-height:46px}
.featured-description>p {font-size:11px;line-height:1.5;color:var(--app-secondary);margin:0;flex:1}
.featured-illustration {width:96px;height:44px;display:grid;place-items:center;flex-shrink:0}
.featured-notch {width:96px;height:36px;border-radius:11px;background:#0b0c0e;position:relative;display:flex;justify-content:center;align-items:center;gap:12px;color:#ff7d4f}
.featured-notch:before {content:'';position:absolute;width:26px;height:2px;border-radius:2px;top:5px;left:35px;background:#ffffff26}
.featured-notch svg {width:15px;height:15px}
.featured-notch>i {height:14px;width:1px;background:#ffffff20}
.featured-shelf {display:flex;align-items:center;padding-left:6px}
.featured-shelf>span {display:grid;place-items:center;width:32px;height:36px;margin-left:-5px;background:var(--app-canvas);border:1px solid var(--app-line);border-radius:6px;color:var(--app-secondary);transform:rotate(-8deg) translateY(2px)}
.featured-shelf>span:nth-child(2) {transform:translateY(-2px);color:var(--app-accent);z-index:1}
.featured-shelf>span:nth-child(3) {transform:rotate(8deg) translateY(2px)}
.featured-shelf svg {width:16px;height:16px}
.home-tool:not(.featured-tool) {padding:14px;border-radius:13px}
.home-tool:not(.featured-tool)>p {font-size:11px;min-height:28px;margin-top:7px;line-height:1.5}
.home-tool .home-tool-actions {margin-top:7px}
.home-tool-actions>.enable-tool {color:var(--app-secondary)}
.home-tool-actions>.enable-tool:hover {color:var(--app-accent)}
@media(max-width:1000px) {
  .featured-description{gap:9px}.featured-description>p{font-size:10px}.featured-illustration{width:78px}.featured-notch{width:78px}.featured-notch:before{left:26px}.featured-shelf>span{width:28px}.home-intro h3{font-size:26px}
}
@media(max-width:760px) {
  .featured-description{flex-direction:column;align-items:flex-start;gap:7px}.featured-description>p{min-height:30px}.featured-illustration{width:96px}.featured-notch{width:96px}.featured-notch:before{left:35px}.home-intro h3{font-size:24px}.home-intro>div>span{font-size:10px}.home-intro>img{width:61px;height:61px}
}
@media(max-width:520px) {
  .home-featured{grid-template-columns:1fr;gap:11px}.featured-description{flex-direction:row;align-items:center;gap:12px}.featured-description>p{font-size:11px;min-height:0}.home-intro h3{font-size:23px}.home-intro>div>span{font-size:10px}.home-intro>img{width:53px;height:53px}.home-intro>div>p{font-size:7px;letter-spacing:1.4px}.home-intro{padding-bottom:18px;gap:9px}.home-tool:not(.featured-tool)>p{min-height:0}
}