:root{
    --bg:#f5f5f7;
    --card:#ffffff;
    --text:#1d1d1f;
    --sub:#6e6e73;
    --line:#e8e8ed;
    --blue:#007aff;
    --dark:#111111;
    --green:#34c759;
    --red:#ff3b30;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
    min-height:100vh;
    background:
        radial-gradient(circle at 20% 0%, rgba(0,122,255,.10), transparent 28%),
        radial-gradient(circle at 90% 10%, rgba(52,199,89,.10), transparent 26%),
        var(--bg);
    color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Helvetica Neue",Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}
.wrap{max-width:1040px;margin:0 auto;padding:24px 16px 34px}
.top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:22px;
}
.brand{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:21px;
    font-weight:900;
    letter-spacing:-.6px;
}
.mark{
    width:38px;height:38px;
    border-radius:14px;
    background:linear-gradient(145deg,#111,#333);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    box-shadow:0 10px 26px rgba(0,0,0,.18);
}
.nav{display:flex;gap:8px;flex-wrap:wrap}
.nav a{
    height:34px;
    padding:0 13px;
    border-radius:999px;
    background:rgba(255,255,255,.72);
    border:1px solid rgba(255,255,255,.9);
    color:#515154;
    display:flex;
    align-items:center;
    font-size:13px;
    backdrop-filter:blur(18px);
}
.hero{
    min-height:230px;
    border-radius:34px;
    background:
        linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,255,255,.72)),
        linear-gradient(135deg,#f8fbff,#eef5ff);
    border:1px solid rgba(255,255,255,.9);
    box-shadow:0 24px 70px rgba(31,41,55,.10);
    padding:34px;
    position:relative;
    overflow:hidden;
    margin-bottom:16px;
}
.hero:before{
    content:"";
    position:absolute;
    width:240px;height:240px;
    right:-70px;top:-80px;
    border-radius:50%;
    background:linear-gradient(135deg,rgba(0,122,255,.22),rgba(52,199,89,.12));
    filter:blur(2px);
}
.hero h1{
    position:relative;
    font-size:42px;
    line-height:1.08;
    letter-spacing:-1.6px;
    margin-bottom:12px;
}
.hero p{
    position:relative;
    max-width:560px;
    color:var(--sub);
    font-size:16px;
    line-height:1.8;
}
.hero-actions{position:relative;display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.btn{
    min-height:42px;
    border:none;
    border-radius:15px;
    padding:0 18px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    font-size:14px;
    cursor:pointer;
    background:var(--blue);
    color:#fff;
}
.btn.dark{background:#111;color:#fff}
.btn.light{background:#fff;color:#1d1d1f;border:1px solid var(--line)}
.btn.red{background:var(--red);color:#fff}
.btn.green{background:var(--green);color:#fff}
.btn.small{min-height:32px;border-radius:11px;padding:0 12px;font-size:12px}
.notice{
    background:rgba(255,255,255,.82);
    border:1px solid rgba(255,255,255,.9);
    backdrop-filter:blur(18px);
    color:#56565c;
    border-radius:22px;
    padding:14px 16px;
    line-height:1.7;
    margin-bottom:18px;
    box-shadow:0 12px 36px rgba(31,41,55,.05);
}
.tabs{
    display:flex;
    gap:9px;
    overflow:auto;
    padding:2px 0 14px;
}
.tab{
    white-space:nowrap;
    padding:9px 15px;
    border-radius:999px;
    background:rgba(255,255,255,.72);
    color:#5d626b;
    border:1px solid rgba(255,255,255,.9);
    font-size:14px;
}
.tab.on{background:#111;color:#fff}
.grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    gap:14px;
}
.product{
    background:rgba(255,255,255,.88);
    border:1px solid rgba(255,255,255,.92);
    border-radius:28px;
    padding:18px;
    box-shadow:0 18px 46px rgba(31,41,55,.07);
    backdrop-filter:blur(18px);
}
.appicon{
    width:64px;height:64px;
    border-radius:20px;
    background:linear-gradient(145deg,#edf5ff,#fff);
    color:#007aff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    font-weight:950;
    margin-bottom:14px;
    box-shadow:inset 0 0 0 1px rgba(0,122,255,.08);
}
.title{font-size:18px;font-weight:900;letter-spacing:-.2px;margin-bottom:6px}
.sub{font-size:13px;color:var(--sub);line-height:1.55;min-height:40px}
.meta{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    margin:17px 0;
}
.price{font-size:28px;font-weight:950;letter-spacing:-.8px}
.stock{
    color:#5b6470;
    background:#f2f4f7;
    border:1px solid #edf0f5;
    font-size:12px;
    padding:6px 9px;
    border-radius:999px;
}
.form{
    max-width:640px;
    margin:0 auto;
    background:rgba(255,255,255,.9);
    border:1px solid rgba(255,255,255,.94);
    border-radius:30px;
    padding:22px;
    box-shadow:0 24px 70px rgba(31,41,55,.09);
    backdrop-filter:blur(18px);
}
label,.label{display:block;font-size:13px;font-weight:800;color:#60646c;margin-bottom:6px}
.input,textarea,select{
    width:100%;
    border:1px solid #e1e5ec;
    background:#fff;
    border-radius:16px;
    min-height:44px;
    padding:0 13px;
    font-size:15px;
    margin-bottom:14px;
    outline:none;
}
textarea{min-height:120px;padding-top:12px;resize:vertical}
.table-wrap{overflow:auto;border-radius:22px;border:1px solid #e8e8ed;background:#fff}
.table{width:100%;border-collapse:collapse;min-width:720px}
.table th,.table td{padding:13px 12px;border-bottom:1px solid #f0f1f4;text-align:left;font-size:14px}
.table th{color:#667085;background:#fafafa;font-size:13px}
.admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.stat{background:#fff;border:1px solid #e8e8ed;border-radius:24px;padding:18px;box-shadow:0 12px 30px rgba(31,41,55,.05)}
.stat b{font-size:30px;display:block;margin-top:6px}
.footer{text-align:center;color:#9ca3af;font-size:12px;margin-top:32px}
@media(max-width:640px){
    .wrap{padding:18px 14px 28px}
    .top{display:block}
    .brand{margin-bottom:12px}
    .nav a{font-size:12px}
    .hero{padding:26px 20px;border-radius:28px}
    .hero h1{font-size:30px}
    .grid{grid-template-columns:1fr}
    .btn:not(.small){width:100%}
    .form{border-radius:26px}
}