:root{color:#1f2933;background:#f4f8fb;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--ink: #1f2933;--muted: #697586;--soft: #eef5f8;--line: #d8e4ea;--panel: #ffffff;--accent: #3aa58d;--accent-strong: #21806b;--blue: #2f80c4;--blue-soft: #dff1ff;--mint-soft: #e8fbf5;--warm-soft: #fff7e8;--warning: #fff6e7;--shadow: 0 16px 40px rgba(32, 55, 75, .11)}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button,input{font:inherit}button{border:0}a{color:inherit}.app-shell{position:relative;min-height:100vh;padding:38px clamp(16px,4vw,52px) 52px;background:radial-gradient(circle at 14% 10%,rgba(255,247,232,.95),transparent 28%),radial-gradient(circle at 86% 8%,rgba(223,241,255,.92),transparent 30%),linear-gradient(155deg,#fffdf8,#f4fbf9 44%,#f6f9ff)}.app-shell:before{position:absolute;inset:0;pointer-events:none;content:"";background:linear-gradient(90deg,rgba(33,128,107,.035) 1px,transparent 1px),linear-gradient(rgba(33,128,107,.035) 1px,transparent 1px);background-size:34px 34px;-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.55),transparent 68%);mask-image:linear-gradient(to bottom,rgba(0,0,0,.55),transparent 68%)}.hero,.workspace,.history-section{position:relative;z-index:1;width:min(1060px,100%);margin:0 auto}.hero{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(20px,4vw,44px);align-items:end;padding:18px 0 26px}.hero-copy{max-width:660px}.eyebrow,.section-kicker{display:inline-flex;align-items:center;color:var(--accent-strong);font-size:.86rem;font-weight:700}.hero h1{margin:10px 0 12px;color:transparent;background:linear-gradient(112deg,#17212b,#1f6f86 48%,#2f80c4);background-clip:text;-webkit-background-clip:text;font-size:clamp(2.2rem,5.2vw,4.4rem);line-height:1.05;letter-spacing:0}.hero p{max-width:560px;margin:0;color:#5c6b7a;font-size:1.05rem;line-height:1.75}.service-card{display:grid;gap:0;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:linear-gradient(160deg,#ffffffeb,#f5fcf9e0),#fff;box-shadow:var(--shadow)}.service-card>div{display:grid;gap:6px;padding:15px 16px;border-bottom:1px solid rgba(216,228,234,.8)}.service-card>div:last-child{border-bottom:0;background:linear-gradient(135deg,#eaf7f3c2,#dff1ffb3)}.service-card span{color:var(--muted);font-size:.84rem}.service-card strong{color:var(--ink);font-size:.98rem}.workspace{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(320px,.82fr);gap:18px;align-items:stretch}.creator-panel,.result-panel,.history-section{border:1px solid rgba(216,228,234,.86);border-radius:8px;background:linear-gradient(180deg,#fffffff5,#fafdfeeb),var(--panel);box-shadow:var(--shadow)}.creator-panel{background:linear-gradient(180deg,#fffffffa,#f8fdfbf0),var(--panel)}.result-panel{background:linear-gradient(160deg,#fffffff5,#f4faffeb),var(--panel)}.creator-panel,.result-panel{padding:clamp(20px,3vw,30px)}.panel-heading,.history-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px}.panel-heading h2,.history-heading h2{margin:5px 0 0;color:#17212b;font-size:clamp(1.35rem,2.2vw,1.8rem);letter-spacing:0}.panel-heading.compact{margin-bottom:18px}.url-field{display:grid;gap:10px}.url-field>span{color:#52606d;font-weight:700}.input-wrap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:11px;align-items:center;min-height:60px;padding:0 15px;border:1px solid #cddce4;border-radius:8px;background:linear-gradient(180deg,#fff,#fbfdfe);transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}.input-wrap:focus-within{border-color:#7cc6b7;background:#fff;box-shadow:0 0 0 4px #3aa58d21,0 10px 22px #2f80c414}.input-wrap input{width:100%;min-width:0;border:0;outline:0;color:var(--ink);background:transparent;font-size:1rem}.input-wrap input::placeholder{color:#9ba8b3}.form-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0 18px;color:var(--muted);font-size:.92rem}.sample-button,.ghost-icon,.icon-button,.action-button,.submit-button{cursor:pointer;transition:transform .14s ease,box-shadow .14s ease,background .14s ease,border-color .14s ease}.sample-button{color:var(--accent-strong);background:transparent;font-weight:700}.sample-button:hover{color:#166855}.action-button:hover,.icon-button:hover,.submit-button:hover:not(:disabled){transform:translateY(-1px)}.ghost-icon,.icon-button{display:inline-grid;place-items:center;width:40px;aspect-ratio:1;border:1px solid transparent;border-radius:8px;color:#52606d;background:linear-gradient(180deg,#f8fbfc,#edf5f8)}.ghost-icon{width:34px;background:#eef3f6}.icon-button:hover,.ghost-icon:hover{border-color:#cddce4;background:#fff}.submit-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:54px;border-radius:8px;color:#fff;background:linear-gradient(135deg,#2f9f87,#2f80c4);box-shadow:0 13px 26px #2f80c438;font-weight:750}.submit-button:hover:not(:disabled){background:linear-gradient(135deg,#248872,#276fa9)}.submit-button:disabled{cursor:not-allowed;opacity:.58}.message{margin-bottom:16px;padding:12px 13px;border-radius:8px;font-weight:650}.error-message{color:#9a3a2b;background:#fff1ec}.empty-state{display:grid;min-height:244px;place-items:center;align-content:center;gap:15px;color:var(--muted);text-align:center}.empty-state p{max-width:220px;margin:0;line-height:1.6}.empty-icon{display:grid;place-items:center;width:62px;aspect-ratio:1;border-radius:50%;color:var(--accent-strong);background:linear-gradient(145deg,var(--mint-soft),var(--blue-soft))}.result-card{display:grid;gap:14px;padding:17px;border:1px solid rgba(216,228,234,.9);border-radius:8px;background:linear-gradient(150deg,#fff,#f9fdfb 54%,#f5fbff)}.result-card.small{min-height:204px}.code-row,.card-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}.code-pill,.status-pill,.history-count{display:inline-flex;align-items:center;min-height:30px;border-radius:999px;padding:0 11px;font-size:.9rem;font-weight:750}.code-pill{color:#1b4f7a;background:linear-gradient(135deg,#eaf4fb,#eef8ff)}.status-pill,.history-count{color:#246f5d;background:linear-gradient(135deg,#eaf7f3,#f7fbef)}.status-pill.deleted{color:#9a3a2b;background:linear-gradient(135deg,#fff1ec,#fff7f4)}.short-url{display:block;overflow-wrap:anywhere;color:var(--blue);font-size:1.02rem;font-weight:750;text-decoration:none}.short-url:hover{text-decoration:underline}.original-url{display:-webkit-box;min-height:44px;margin:0;overflow:hidden;color:var(--muted);line-height:1.55;overflow-wrap:anywhere;-webkit-line-clamp:2;-webkit-box-orient:vertical}.stats-line{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;color:#647282;font-size:.92rem}.stats-line span{display:inline-flex;align-items:center;gap:5px}.stats-line strong{color:#21313f;font-weight:800}.qr-panel{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:center;padding:12px;border:1px solid #d8e8ef;border-radius:8px;background:linear-gradient(135deg,#fff,#f5fbff)}.qr-panel img{display:block;width:96px;height:96px;border:1px solid #e1ebf0;border-radius:8px;background:#fff}.qr-panel a{color:var(--blue);font-weight:750;text-decoration:none}.qr-panel a:hover{text-decoration:underline}.action-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 13px;border:1px solid #cfe2db;border-radius:8px;color:#1c594c;background:linear-gradient(180deg,#fff,#f4fbf8);font-weight:750}.action-button:hover{background:linear-gradient(180deg,#f9fffd,#eaf7f3)}.link-button{text-decoration:none}.card-actions{justify-content:flex-start;flex-wrap:wrap}.danger-button{color:#9a3a2b;background:linear-gradient(180deg,#fff8f6,#fff0ec)}.danger-button:hover:not(:disabled){border-color:#f0c4b8;background:#fff7f3}.danger-button:disabled{cursor:not-allowed;opacity:.45}.history-section{margin-top:18px;padding:clamp(20px,3vw,28px)}.history-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.history-empty{margin:0;color:var(--muted)}.spin{animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:920px){.hero,.workspace{grid-template-columns:1fr}.service-card{grid-template-columns:repeat(3,minmax(0,1fr))}.service-card>div{border-right:1px solid var(--line);border-bottom:0}.service-card>div:last-child{border-right:0}.history-grid{grid-template-columns:1fr 1fr}}@media(max-width:640px){.app-shell{padding:24px 14px 34px}.hero{padding-top:6px}.hero h1{font-size:2.35rem}.service-card{grid-template-columns:1fr}.service-card>div{border-right:0;border-bottom:1px solid var(--line)}.service-card>div:last-child{border-bottom:0}.workspace,.history-grid{grid-template-columns:1fr}.form-meta,.code-row,.card-actions{align-items:flex-start;flex-direction:column}.action-button,.card-actions .icon-button{width:100%}.qr-panel{grid-template-columns:1fr}}