* { box-sizing: border-box; }
:root { --bg:#f5f7fb; --card:#fff; --text:#101828; --muted:#667085; --border:#e4e7ec; --primary:#175cd3; --primary-dark:#1849a9; --danger:#d92d20; --danger-dark:#b42318; --warning-bg:#fff7e6; --warning-text:#7a4b00; --warning-border:#ffd18a; --shadow:0 14px 40px rgba(16,24,40,.08); }
body { margin:0; min-height:100vh; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,Arial,sans-serif; background:radial-gradient(circle at top right,rgba(23,92,211,.12),transparent 35%),var(--bg); color:var(--text); }
a { color:var(--primary); text-decoration:none; font-weight:700; }
a:hover { text-decoration:underline; }
.shell { width:min(1120px,94vw); margin:0 auto; }
.topbar { height:82px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { display:flex; align-items:center; gap:12px; color:var(--text); }
.brand:hover { text-decoration:none; }
.brand small { display:block; color:var(--muted); margin-top:3px; font-weight:500; }
.brand-icon { width:44px; height:44px; border-radius:14px; display:inline-grid; place-items:center; background:linear-gradient(135deg,#175cd3,#3538cd); color:white; font-weight:900; letter-spacing:-.5px; box-shadow:0 10px 25px rgba(23,92,211,.22); }
.brand-icon.large { width:64px; height:64px; border-radius:20px; }
.nav { display:flex; align-items:center; gap:14px; }
.nav a { color:var(--muted); padding:9px 12px; border-radius:10px; }
.nav a.active { background:#eaf1ff; color:var(--primary); }
.link-button { border:0; background:transparent; color:var(--danger); font-weight:800; cursor:pointer; padding:9px 12px; }
.container { padding:12px 0 56px; }
.grid { display:grid; grid-template-columns:1.7fr 1fr; gap:18px; align-items:start; }
.card,.login-card,.install-card { background:rgba(255,255,255,.96); border:1px solid var(--border); border-radius:22px; box-shadow:var(--shadow); }
.card { padding:24px; margin-bottom:18px; }
.login-wrap { min-height:calc(100vh - 110px); display:grid; place-items:center; }
.login-card { width:min(440px,100%); padding:30px; }
.login-title { text-align:center; margin-bottom:22px; }
.login-title h1 { margin:16px 0 6px; }
.login-title p { margin:0; color:var(--muted); line-height:1.7; }
h1,h2 { margin-top:0; letter-spacing:-.5px; }
.muted { color:var(--muted); line-height:1.75; }
.mono { direction:ltr; unicode-bidi:plaintext; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; }
.section-head { display:flex; align-items:start; justify-content:space-between; gap:16px; margin-bottom:18px; }
.warn,.error { padding:12px 14px; border-radius:14px; margin:14px 0; line-height:1.7; font-weight:700; }
.warn { background:var(--warning-bg); color:var(--warning-text); border:1px solid var(--warning-border); }
.error { background:#fff1f3; color:#c01048; border:1px solid #fecdd6; }
form { display:grid; gap:10px; }
label { font-weight:800; margin-top:8px; }
label span { color:var(--muted); font-size:13px; font-weight:700; }
input { width:100%; border:1px solid #d0d5dd; border-radius:14px; padding:14px 15px; font-size:16px; background:white; outline:none; }
input:focus { border-color:var(--primary); box-shadow:0 0 0 4px rgba(23,92,211,.12); }
button,.install-button,.small-button { border:0; border-radius:14px; padding:14px 18px; background:var(--primary); color:white; font-size:16px; font-weight:900; cursor:pointer; text-decoration:none; display:inline-block; text-align:center; }
button:hover,.install-button:hover,.small-button:hover { background:var(--primary-dark); text-decoration:none; }
.upload-form button { margin-top:8px; }
details { border:1px dashed #d0d5dd; border-radius:16px; padding:12px; margin:8px 0; }
summary { cursor:pointer; font-weight:900; color:var(--primary); }
.tips { padding-inline-start:20px; color:var(--muted); line-height:1.9; }
.empty { border:1px dashed #d0d5dd; border-radius:16px; padding:20px; color:var(--muted); text-align:center; }
.app-list { display:grid; gap:12px; }
.app-row { border:1px solid #eaecf0; border-radius:18px; padding:16px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.app-main { min-width:0; display:flex; align-items:center; gap:14px; }
.app-icon { flex:0 0 auto; width:48px; height:48px; border-radius:16px; display:grid; place-items:center; background:#eef4ff; color:var(--primary); font-weight:950; font-size:22px; }
.app-icon.big { width:86px; height:86px; border-radius:26px; margin:0 auto 16px; font-size:38px; }
.meta { display:flex; flex-wrap:wrap; gap:8px 12px; color:var(--muted); font-size:14px; margin-top:8px; }
.actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.actions form { display:inline; }
.small-button { font-size:14px; padding:10px 12px; border-radius:12px; }
.small-button.light { background:#eef4ff; color:var(--primary); }
.small-button.light:hover { background:#dce9ff; }
.small-button.danger { background:var(--danger); }
.small-button.danger:hover { background:var(--danger-dark); }
.install-card { width:min(620px,100%); margin:35px auto; padding:34px; text-align:center; }
.install-button { font-size:20px; padding:16px 28px; margin-top:22px; }
.install-meta { display:flex; justify-content:center; gap:10px 18px; flex-wrap:wrap; color:var(--muted); margin:18px 0 4px; }
.links { margin-top:24px; color:var(--muted); line-height:1.8; }
@media (max-width:820px) { .topbar{height:auto;padding:18px 0;align-items:flex-start;flex-direction:column}.grid{grid-template-columns:1fr}.app-row{align-items:stretch;flex-direction:column}.actions{justify-content:stretch}.actions a,.actions form,.actions button{width:100%} }