/* The Later reference uses a quiet navy Material interface with violet accents. */
.phone-screen{background:#101729;border-color:#30394e;padding:11px 12px;display:flex;flex-direction:column;color:#e5e1ec}
.phone-top{font-size:8px;color:#e5e1ec;flex-shrink:0;padding-inline:0}
.camera{width:47px;height:12px;top:9px}
.phone-app-header{gap:5px;margin-top:18px;font-family:Arial,sans-serif;font-size:18px;letter-spacing:-.7px;flex-shrink:0}
.later-icon{display:block;width:22px;height:22px;border-radius:7px;padding:0;flex-shrink:0;background:none}
.phone-app-actions{display:flex;align-items:center;gap:13px;margin-left:auto;color:#e3deeb}
.phone-app-actions svg{height:12px;width:12px;display:block}
.phone-greeting,html:lang(de) .phone-greeting{font-family:Arial,sans-serif;font-size:14px;letter-spacing:-.4px;font-weight:700;line-height:1.22;margin-top:15px;flex-shrink:0}
.phone-subtitle{font-family:Arial,sans-serif;color:#aebacc;font-size:8px;line-height:1.5;letter-spacing:.05px;margin-top:8px;flex-shrink:0}
.phone-tabs{margin-top:13px;margin-bottom:0;padding:0;border:0;border-radius:0;background:none;gap:22px;flex-shrink:0;align-items:center}
.phone-tabs button{font-family:Arial,sans-serif;font-size:9px;font-weight:600;color:#a999fb;background:transparent;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 9px;min-height:31px;border-radius:25px;flex:1}
.phone-tabs button[aria-selected=true]{background:#4a435b;color:#e8def5}
.phone-tabs svg{width:13px;height:13px;flex-shrink:0}
#concept-panel{flex:1;min-height:0;margin-top:15px;padding-bottom:14px;overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain}
#concept-panel::-webkit-scrollbar{display:none}
.mock-group{display:flex;align-items:center;gap:7px;font-family:Arial,sans-serif;font-size:8px;font-weight:700;letter-spacing:.4px;margin:0 0 9px;padding:0 1px;color:#e1dce8}
.mock-group:not(:first-child){margin-top:14px}
.mock-group>svg{width:13px;height:13px;color:var(--group-color);flex-shrink:0}
.mock-group-count{margin-left:auto;background:#243049;color:#adbbd0;width:11px;height:11px;display:grid;place-items:center;font-size:7px;font-weight:400;letter-spacing:0;border-radius:50%}
.mock-task{display:flex;align-items:center;gap:8px;min-height:44px;padding:8px;background:#1c263b;border-radius:13px;margin-top:6px;font-family:Arial,sans-serif}
.mock-task-icon{display:grid;place-items:center;width:27px;height:27px;flex-shrink:0;border-radius:9px;color:var(--task-color);background:var(--task-background)}
.mock-task-icon svg{height:15px;width:15px}
.mock-task-copy{min-width:0;flex:1}
.mock-task strong{font-size:10px;font-weight:700;line-height:1.35;display:block;color:#e5e7ee}
.mock-task small{font-size:7px;line-height:1.35;color:#aebace;display:block;margin-top:4px}
.mock-check{width:12px;height:12px;flex-shrink:0;border:1.3px solid #8b9bb6;border-radius:50%;margin-left:1px}
.mock-archive-empty{border:1px dashed #a897fa50;background:#a897fa09;display:flex;align-items:center;flex-direction:column;padding:25px 12px;border-radius:14px;text-align:center;color:#a897fa;gap:12px;font-family:Arial,sans-serif}
.mock-archive-empty svg{width:25px;height:25px}.mock-archive-empty strong{font-size:11px;color:#e4deed}.mock-archive-empty p{font-size:8px;color:#afbdd1;line-height:1.6}
.phone-bottom{position:relative;bottom:auto;left:auto;right:auto;margin:0 -12px -11px;background:#1c263b;padding:8px 7px 11px;display:flex;align-items:end;gap:4px;justify-content:space-between;flex-shrink:0;min-height:47px;color:#aebace;font-family:Arial,sans-serif}
.phone-nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:27px;font-size:5px;line-height:1.2;white-space:nowrap}
.phone-nav-item>span{display:grid;place-items:center;min-height:15px;padding:2px 7px;border-radius:16px}
.phone-nav-item.active>span{background:#4a435b;color:#e8def5}.phone-nav-item.active{color:#e5e7ee}
.phone-nav-item svg{width:12px;height:12px}
.phone-plus{width:32px;height:32px;border-radius:11px;background:#a294ff;color:#172033;font-size:24px;line-height:32px;align-self:center;flex-shrink:0}
@media(max-width:1100px){.phone-tabs{gap:15px}.phone-app-actions{gap:10px}.phone-greeting,html:lang(de) .phone-greeting{font-size:13px}.mock-task{gap:6px;padding:7px}.mock-task strong{font-size:9px}.phone-nav-item{font-size:4.5px;min-width:24px}}
@media(max-width:760px){.phone-greeting,html:lang(de) .phone-greeting{font-size:13.5px}.mock-task strong{font-size:9.5px}}
@media(max-width:360px){.phone-greeting,html:lang(de) .phone-greeting{font-size:13px}.mock-task strong{font-size:9px}}