:root{--bg:#0D1117;--surf:#161B22;--line:#263241;--ink:#E6EDF3;--soft:#8B98A8;--accent:#E8703A;--teal:#2EC4B6;--muted:#2A313C;--display:Georgia,"Times New Roman",serif;--ui:system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:var(--ui);-webkit-font-smoothing:antialiased}
body{padding:calc(env(safe-area-inset-top) + 12px) 16px calc(env(safe-area-inset-bottom) + 24px)}
.bg{position:fixed;inset:-40px;background-image:linear-gradient(#111A24 1px,transparent 1px),linear-gradient(90deg,#111A24 1px,transparent 1px);background-size:40px 40px;animation:drift 20s linear infinite;pointer-events:none}
@keyframes drift{to{transform:translate(40px,40px)}}
.top{position:relative;display:flex;align-items:center;gap:12px;padding:8px 4px 16px}
.app-ico{border-radius:12px}
.word{font-family:var(--display);font-weight:700;font-size:20px}
.sub{color:var(--soft);font-size:13px;margin-top:2px}
main{position:relative;display:grid;gap:14px;max-width:560px;margin:0 auto}
.card{background:rgba(22,27,34,.94);border:1px solid var(--line);border-radius:18px;padding:20px;animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
h2{margin:0 0 8px;font-size:16px;font-weight:600}
.muted,.hint{color:var(--soft);font-size:14px;line-height:1.5;margin:0 0 12px}
.hint{font-size:12px;margin:12px 0 0}
.row{display:flex;gap:10px}
input[type=text],#domain{flex:1;min-width:0;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:14px;font:16px var(--ui)}
#domain:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(46,196,182,.15)}
.btn{background:var(--accent);color:var(--bg);border:0;border-radius:12px;padding:0 18px;font:600 15px var(--ui);cursor:pointer;min-height:48px}
.btn:disabled{background:var(--muted);color:var(--soft)}
.drop{display:flex;flex-direction:column;align-items:center;gap:8px;border:1px dashed var(--line);border-radius:16px;padding:26px 14px;cursor:pointer;background:var(--bg);text-align:center;transition:border-color .3s,transform .3s}
.drop:active{transform:scale(.99)}
.drop small{color:var(--soft)}
.doc{width:44px;height:56px;border:2px solid var(--accent);border-radius:8px;position:relative;margin-bottom:4px;animation:bob 3s ease-in-out infinite}
.doc i{position:absolute;left:8px;right:8px;height:2px;background:var(--accent)}
.doc i:nth-child(1){top:14px}.doc i:nth-child(2){top:22px}.doc i:nth-child(3){top:30px}
@keyframes bob{50%{transform:translateY(-6px)}}
.bar{height:10px;margin:16px 0 10px;background:var(--muted);border-radius:8px;overflow:hidden}
.fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent),#F09A6B);transition:width .2s linear}
.status{color:var(--soft);font-size:13px;margin:0;min-height:1.4em}
.inbox{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.inbox li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.inbox a{color:var(--teal);font-weight:600;text-decoration:none;white-space:nowrap}
.tuto ol{margin:0 0 12px;padding-left:20px;color:var(--ink);line-height:1.7}
.tuto li{margin-bottom:4px}
[hidden]{display:none!important}