:root { --ink:#1d2632; --muted:#687382; --line:#e7e9ec; --bg:#f8f9fa; --paper:#fff; --accent:#f24d2e; --teal:#0b8b89; --shadow:0 12px 30px rgba(29,38,50,.08); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--bg); font-family:"Noto Sans SC",sans-serif; } button,input,select,textarea { font:inherit; } button { cursor:pointer; }
.site-header { height:72px; max-width:1200px; padding:0 28px; margin:auto; display:flex; align-items:center; justify-content:space-between; } .brand { color:var(--ink); display:flex; align-items:center; gap:9px; font-family:Outfit,sans-serif; font-size:22px; font-weight:800; text-decoration:none; } .brand-mark { display:grid; place-items:center; width:29px; height:29px; border-radius:8px; color:#fff; background:var(--accent); font-size:16px; } nav { display:flex; gap:29px; margin-left:auto; margin-right:30px; } nav a,.text-link { color:var(--muted); font-size:14px; text-decoration:none; } nav a:hover,.text-link:hover { color:var(--accent); }.theme-button { border:1px solid var(--line); color:var(--ink); background:var(--paper); border-radius:7px; width:36px; height:36px; font-size:20px; }
.hero { max-width:1200px; min-height:447px; margin:8px auto 40px; padding:78px 50px; border-radius:12px; overflow:hidden; position:relative; color:#fff; background:#143e45; display:flex; isolation:isolate; } .hero:after { content:""; position:absolute; width:620px; height:620px; border-radius:50%; background:#0b7775; right:-190px; top:-250px; z-index:-2; }.hero:before { content:""; position:absolute; width:480px; height:480px; border-radius:50%; border:1px solid rgba(255,255,255,.13); right:-55px; top:-170px; z-index:-1; }.hero-copy { width:590px; }.eyebrow { margin:0 0 10px; color:var(--accent); letter-spacing:1.4px; font-family:Outfit,sans-serif; font-size:11px; font-weight:700; }.hero .eyebrow { color:#98d8ce; }.hero h1 { margin:0; font-family:Outfit,"Noto Sans SC",sans-serif; font-size:48px; line-height:1.16; letter-spacing:0; }.hero h1 em { color:#d8f280; font-style:normal; }.hero-text { max-width:470px; margin:20px 0 26px; color:#d2e1e0; line-height:1.8; font-size:15px; }.search-box { display:flex; align-items:center; width:100%; max-width:480px; height:52px; padding:0 14px; border-radius:8px; color:#819094; background:#fff; box-shadow:0 10px 24px rgba(0,0,0,.1); }.search-box span { font-size:26px; line-height:1; transform:rotate(-18deg); }.search-box input { border:0; outline:0; width:100%; margin:0 12px; color:var(--ink); background:transparent; font-size:14px; }.search-box kbd { padding:2px 7px; border:1px solid #dfe4e5; border-radius:4px; color:#8a9497; background:#f4f5f5; font-size:12px; }.search-note { margin:12px 0 0; color:#b4cecb; font-size:12px; }.search-note strong { color:#fff; }.hero-art { position:absolute; right:0; width:43%; height:100%; top:0; }.orbit { position:absolute; border:1px solid rgba(225,255,248,.21); border-radius:50%; }.orbit-one { width:380px; height:380px; top:48px; right:-75px; }.orbit-two { width:250px; height:250px; top:110px; right:-10px; }.floating-app { display:grid; position:absolute; place-items:center; border-radius:13px; box-shadow:0 16px 25px rgba(0,35,35,.25); font-family:Outfit,sans-serif; font-size:29px; }.app-one { width:70px; height:70px; top:70px; right:225px; color:#f2f8ff; background:#406ce4; transform:rotate(-9deg); }.app-two { width:57px; height:57px; top:146px; right:93px; color:#6033b7; background:#f5d9fb; transform:rotate(11deg); }.app-three { width:55px; height:55px; top:248px; right:242px; color:#ed533b; background:#ffe7d9; transform:rotate(8deg); }.hero-card { width:205px; position:absolute; right:35px; bottom:35px; padding:18px; border:1px solid rgba(255,255,255,.25); border-radius:9px; color:#eefdfc; background:rgba(10,68,71,.56); backdrop-filter:blur(8px); }.hero-card span,.hero-card small { display:block; font-size:11px; color:#b5d2cf; }.hero-card strong { display:block; margin:7px 0 3px; font-family:Outfit,sans-serif; font-size:20px; }.hero-card i { position:absolute; right:18px; top:26px; color:#d8f280; font-size:18px; font-style:normal; }
.content-section { max-width:1200px; margin:0 auto 68px; padding:0 4px; }.section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:22px; }.section-heading h2 { margin:0; font-size:25px; line-height:1.2; }.section-heading > p { color:var(--muted); font-size:13px; }.category-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }.category-button { min-height:124px; padding:16px; border:1px solid var(--line); border-radius:8px; text-align:left; color:var(--ink); background:var(--paper); transition:.2s ease; }.category-button:hover,.category-button.active { transform:translateY(-3px); border-color:transparent; box-shadow:var(--shadow); }.category-icon { display:grid; place-items:center; width:39px; height:39px; margin-bottom:16px; border-radius:8px; color:var(--category); background:var(--icon-bg); font-family:Outfit,sans-serif; font-size:19px; }.category-name { display:block; font-weight:700; font-size:14px; }.category-count { color:var(--muted); font-size:11px; }
.software-section { padding-top:5px; }.sort-wrap { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:13px; }.sort-wrap select { padding:7px 28px 7px 10px; border:1px solid var(--line); border-radius:6px; outline:0; color:var(--ink); background:var(--paper); font-size:13px; }.active-filter { display:flex; width:max-content; align-items:center; gap:7px; margin:-9px 0 17px; padding:4px 8px 4px 10px; border-radius:5px; color:var(--teal); background:#e2f4f1; font-size:12px; }.active-filter button { border:0; color:inherit; background:transparent; font-size:18px; line-height:1; }.software-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.software-card { display:flex; min-height:144px; padding:20px; border:1px solid var(--line); border-radius:8px; color:inherit; text-align:left; background:var(--paper); transition:.2s ease; }.software-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); }.app-icon { display:grid; flex:0 0 auto; place-items:center; width:47px; height:47px; margin-right:14px; border-radius:10px; color:#fff; background:var(--app-color); font-family:Outfit,sans-serif; font-size:20px; font-weight:700; }.app-info { min-width:0; }.app-name { display:flex; gap:7px; align-items:center; font-weight:700; font-size:15px; }.platform { padding:2px 5px; border-radius:3px; color:var(--muted); background:#f0f2f3; font-size:9px; font-weight:500; }.app-desc { height:38px; margin:7px 0 8px; overflow:hidden; color:var(--muted); font-size:12px; line-height:1.6; }.app-meta { color:#929ba5; font-size:10px; }.app-meta span + span:before { content:"·"; margin:0 4px; }.empty-state { padding:45px; text-align:center; color:var(--muted); }.popular-section { padding-bottom:15px; }.popular-list { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.popular-card { display:flex; align-items:center; gap:13px; padding:14px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.popular-rank { color:#a4adb4; font-family:Outfit,sans-serif; font-size:19px; font-weight:700; }.popular-card:nth-child(1) .popular-rank { color:var(--accent); }.popular-copy { min-width:0; flex:1; }.popular-copy strong,.popular-copy small { display:block; }.popular-copy strong { font-size:13px; }.popular-copy small { overflow:hidden; color:var(--muted); text-overflow:ellipsis; white-space:nowrap; font-size:11px; }.popular-card .app-icon { width:37px; height:37px; margin:0; border-radius:8px; font-size:15px; }
footer { max-width:1200px; margin:auto; padding:28px 4px; border-top:1px solid var(--line); display:flex; align-items:center; gap:24px; color:var(--muted); font-size:12px; } footer .brand { font-size:18px; } footer .brand-mark { width:25px; height:25px; font-size:13px; } footer span:last-child { margin-left:auto; }
dialog { width:min(540px,calc(100% - 32px)); padding:30px; border:0; border-radius:12px; color:var(--ink); background:var(--paper); box-shadow:0 24px 90px rgba(0,0,0,.3); } dialog::backdrop { background:rgba(15,27,36,.62); backdrop-filter:blur(2px); }.dialog-close { position:absolute; right:16px; top:13px; border:0; color:var(--muted); background:transparent; font-size:28px; }.dialog-top { display:flex; align-items:center; gap:15px; padding-right:25px; }.dialog-top .app-icon { width:58px; height:58px; margin:0; font-size:24px; }.dialog-title { margin:0; font-size:23px; }.dialog-summary { margin:20px 0; color:var(--muted); line-height:1.8; font-size:14px; }.detail-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:20px 0; }.detail-item { padding:10px; border-radius:6px; background:var(--bg); }.detail-item small,.detail-item strong { display:block; }.detail-item small { color:var(--muted); font-size:11px; }.detail-item strong { margin-top:3px; font-size:13px; }.download-link { display:block; padding:12px; border-radius:6px; color:#fff; background:var(--accent); text-align:center; text-decoration:none; font-size:14px; font-weight:700; }
body.dark { --ink:#eaf0f2; --muted:#a1adb6; --line:#283742; --bg:#111b22; --paper:#17242d; --shadow:0 12px 30px rgba(0,0,0,.25); } body.dark .theme-button,body.dark .sort-wrap select { background:#17242d; } body.dark .platform { background:#263641; } body.dark .active-filter { background:#123b3e; } body.dark .detail-item { background:#111b22; }
@media (max-width:800px) { .site-header { padding:0 20px; } nav { display:none; }.hero { min-height:510px; margin:0 0 38px; padding:58px 24px; border-radius:0; }.hero h1 { font-size:38px; }.hero-copy { width:100%; }.hero-art { opacity:.5; width:70%; right:-8%; top:140px; }.hero-card { display:none; }.content-section { margin-bottom:48px; padding:0 20px; }.category-grid { grid-template-columns:repeat(3,1fr); gap:9px; }.category-button { min-height:105px; padding:12px; }.category-icon { margin-bottom:10px; }.software-grid { grid-template-columns:1fr; }.popular-list { grid-template-columns:1fr; gap:0; }.section-heading h2 { font-size:22px; } footer { margin:0 20px; padding:22px 0; flex-wrap:wrap; gap:12px; } footer span:last-child { margin-left:0; width:100%; }.sort-wrap label { display:none; } }
@media (max-width:380px) { .category-grid { grid-template-columns:repeat(2,1fr); } .hero h1 { font-size:33px; } }
.header-actions { display:flex; align-items:center; gap:8px; }.admin-button { height:36px; padding:0 13px; border:1px solid var(--line); border-radius:7px; color:var(--ink); background:var(--paper); font-size:13px; }
#adminDialog { width:min(620px,calc(100% - 32px)); max-height:90vh; overflow:auto; } #adminDialog h3 { margin:0 0 18px; } #adminForm { display:grid; grid-template-columns:1fr 1fr; gap:13px; } #adminForm label { display:grid; gap:6px; color:var(--muted); font-size:12px; } #adminForm label:nth-child(6),#adminForm label:nth-child(7),#adminForm .form-row,#adminForm .download-link { grid-column:1/-1; } #adminForm input,#adminForm select,#adminForm textarea { width:100%; padding:10px; border:1px solid var(--line); border-radius:6px; color:var(--ink); background:var(--paper); outline:0; } #adminForm textarea { min-height:82px; resize:vertical; } #adminForm input[type=color] { height:42px; padding:4px; } .form-row { display:grid; grid-template-columns:1fr 1fr; gap:13px; } .download-link { border:0; } .admin-list { margin-top:25px; border-top:1px solid var(--line); } .admin-list h4 { margin:18px 0 8px; } .admin-list div { display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--line); font-size:13px; } .admin-list button { border:0; color:#d64032; background:transparent; } body.dark .admin-button { background:var(--paper); } @media (max-width:600px) { #adminForm { grid-template-columns:1fr; } #adminForm label,#adminForm label:nth-child(6),#adminForm label:nth-child(7),#adminForm .form-row,#adminForm .download-link { grid-column:1; } }