*{box-sizing:border-box}
:root{--ink:#fff;--muted:#c8c8d0;--panel:#ffffff18;--accent:#8c74ff}
html,body{margin:0;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
body{background:#d6d6da;display:grid;place-items:center;color:var(--ink)}
button,input,textarea{font:inherit}
button{cursor:pointer}
.device{width:min(100vw,430px);height:min(100dvh,920px);min-height:620px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 18% 67%,#454653 0%,transparent 45%),radial-gradient(ellipse at 82% 25%,#252630 0%,transparent 42%),linear-gradient(145deg,#15151b,#060609 65%,#252630);color:white;isolation:isolate}
.statusbar{height:62px;padding:15px 25px 0;display:flex;justify-content:space-between;align-items:flex-start;font-size:16px;font-weight:750;position:relative;z-index:3}
.status-right{display:flex;gap:9px;align-items:center;font-size:15px}.signal{letter-spacing:-3px;font-size:16px}.battery{font-size:12px;background:#fff;color:#111;border-radius:6px;padding:2px 5px}
.screen{position:absolute;inset:62px 0 0;display:none}.screen.active{display:flex;flex-direction:column}
.home-screen{padding:8px 22px 39px}
.welcome-row{display:flex;justify-content:space-between;align-items:center;margin:0 0 25px}.greeting{font-size:14px;color:#ffffffb8;letter-spacing:.2px}.small-round{width:34px;height:34px;border-radius:50%;border:1px solid #ffffff30;background:#ffffff12;color:white}
.app-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:10px;row-gap:24px}
.app,.dock-app{min-width:0;border:0;background:transparent;color:white;padding:0;display:flex;align-items:center;flex-direction:column;gap:7px;font-size:12px;text-shadow:0 1px 3px #0007}
.app-icon{width:min(100%,68px);aspect-ratio:1;border-radius:23%;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;box-shadow:0 2px 5px #0003;flex-shrink:0}
.calendar-icon{background:linear-gradient(#fff 0 26%,#f9f9f9 26%);color:#17171a;flex-direction:column;gap:0}.calendar-icon small{font-size:11px;color:#d63c3c;font-weight:800}.calendar-icon b{font-size:39px;font-weight:350;line-height:1.1}
.photos-icon{background:#fff}.petal{position:absolute;width:22%;height:38%;border-radius:60% 60% 48% 48%;left:39%;top:31%;transform-origin:50% 50%;opacity:.9}.p1{background:#ff4e5e;transform:translateY(-44%) rotate(0deg)}.p2{background:#ff9f24;transform:rotate(45deg) translateY(-44%)}.p3{background:#f9d332;transform:rotate(90deg) translateY(-44%)}.p4{background:#75c940;transform:rotate(135deg) translateY(-44%)}.p5{background:#24a6e8;transform:rotate(180deg) translateY(-44%)}.p6{background:#5575e9;transform:rotate(225deg) translateY(-44%)}.p7{background:#a15be5;transform:rotate(270deg) translateY(-44%)}.p8{background:#f05ab2;transform:rotate(315deg) translateY(-44%)}
.camera-icon{background:linear-gradient(145deg,#ddd,#888)}.lens{width:72%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 38% 35%,#c8e4ff 0 7%,#5277be 12%,#080b19 29%,#151a29 43%,#05060a 61%,#6c7d9c 68%,#111 75%);border:4px solid #777;box-shadow:inset 0 0 5px #000}
.clock-icon{background:#fff;color:#111}.clock-icon:before{content:"";position:absolute;inset:10%;border:2px dotted #888;border-radius:50%}.clockhands{height:36%;width:3px;background:#151515;position:absolute;top:17%;left:49%;transform:rotate(-20deg);transform-origin:bottom;border-radius:4px}.clockhands:after{content:"";height:27px;width:2px;background:#f90;position:absolute;top:100%;left:0}
.notes-icon{background:linear-gradient(#ffdf58 0 28%,#fff 28%);flex-direction:column;gap:9px;padding-top:17px}.notes-icon span{height:1px;width:75%;background:#bbb}
.insta-icon{background:radial-gradient(circle at 30% 100%,#ffd05a,transparent 45%),linear-gradient(35deg,#6b42db,#f52c84 55%,#ff963f);font-size:57px;font-weight:250;line-height:1}
.translate-icon{background:#fff;color:#4285f4;font-size:31px}.translate-icon i{font-style:normal;font-size:24px;color:#65717c;background:#e6ebef;padding:2px}
.netflix-icon{background:#050505;color:#e50914;font-size:48px;font-weight:900;text-shadow:2px 0 #760000,-2px 0 #ff3737}
.search-pill{align-self:center;margin-top:auto;margin-bottom:25px;padding:9px 19px;border-radius:30px;background:#ffffff32;border:1px solid #ffffff35;color:#fff;font-size:14px;backdrop-filter:blur(16px)}
.dock{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:18px 12px;border:1px solid #ffffff55;border-radius:34px;background:#ffffff2b;backdrop-filter:blur(28px);min-height:103px}
.dock-app{position:relative;justify-content:center}.dock-app .app-icon{width:min(100%,66px)}
.badge{position:absolute;top:-5px;right:0;min-width:25px;height:25px;padding:0 6px;border-radius:18px;background:#ff453a;display:grid;place-items:center;font-size:12px;box-shadow:0 1px 3px #0003}
.phone-icon{background:linear-gradient(#83ec79,#37b94a);font-size:36px}.safari-icon{background:radial-gradient(circle,#e8f9ff 0 46%,#5aa8f5 47% 68%,#fff 70%);color:#e34b4b;font-size:39px;transform:none}.messages-icon{background:linear-gradient(#9bf68e,#3dbd50);font-size:35px;color:#fff}.kakao-icon{background:#ffdf36;color:#392d16;font-size:12px;font-weight:900}.app-screen{background:#f5f5f8;color:#19191d;z-index:2}.app-header{height:53px;display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;padding:0 17px;border-bottom:1px solid #ddd;background:#f8f8fa}.app-header strong{text-align:center;font-size:16px}.text-button{border:0;background:transparent;color:#1677ff;font-size:16px;text-align:left;padding:6px 0}.app-header .text-button:last-child{text-align:right}.app-body{padding:20px 18px;overflow:auto;flex:1}.home-indicator{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:108px;height:4px;background:#fff;border-radius:10px;z-index:8;cursor:pointer;mix-blend-mode:difference}
.notes-title{font-size:30px;margin:2px 0 12px}.notes-editor{width:100%;height:55vh;resize:none;border:0;outline:0;background:transparent;font-size:17px;line-height:1.6;color:#25252a}.subtle{font-size:12px;color:#8b8b93;margin-bottom:12px}.primary-btn,.secondary-btn{border:0;border-radius:12px;padding:12px 15px;background:#1677ff;color:white}.secondary-btn{background:#e7e7ed;color:#222}
.photo-toolbar{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:18px}.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.photo-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:5px}.empty-state{text-align:center;color:#777;padding:55px 12px;line-height:1.7}
.calc{display:flex;flex-direction:column;justify-content:flex-end;min-height:65vh}.calc-display{text-align:right;font-size:55px;overflow:hidden;padding:20px 5px}.calc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.calc-key{border:0;border-radius:50%;aspect-ratio:1;background:#d6d6dc;color:#111;font-size:24px}.calc-key.operator{background:#ff9f0a;color:white}.calc-key.dark{background:#505056;color:white}
.dial-display{text-align:center;font-size:30px;min-height:65px;padding:25px 0}.dial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:280px;margin:auto}.dial-key{border:0;border-radius:50%;aspect-ratio:1;background:#e2e2e7;font-size:25px}.dial-call{display:block;margin:18px auto}
.message-card,.setting-row,.list-row{background:white;border-radius:13px;padding:14px;margin:9px 0;display:flex;justify-content:space-between;align-items:center;border:0;width:100%;text-align:left;color:#222}.message-card small{display:block;color:#888;margin-top:4px}.setting-row input{width:22px;height:22px}
.search-body{padding:20px}.search-input{width:100%;border:0;border-radius:12px;background:#e4e4e9;padding:13px 15px;font-size:16px;outline:0}.search-results{margin-top:12px}.search-result{display:block;width:100%;padding:13px;border:0;border-bottom:1px solid #ddd;background:transparent;text-align:left;color:#222}
.toast{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);padding:10px 16px;border-radius:20px;background:#222;color:#fff;font-size:13px;z-index:10;white-space:nowrap;box-shadow:0 4px 18px #0003}
@media(min-width:600px){.device{height:min(900px,95dvh);border:5px solid #222;border-radius:38px}.statusbar{padding-top:17px}}
@media(max-height:700px){.welcome-row{margin-bottom:15px}.app-grid{row-gap:15px}.app-icon{max-width:58px}.dock{min-height:88px;padding:12px}.home-screen{padding-bottom:30px}}