整体界面科技感增强：动态背景、霓虹导航与卡片光效

Co-authored-by: Cursor <cursoragent@cursor.com>

static/css/tech.css

@@ -0,0 +1,212 @@
+/* 科技感增强层 — 与 base.html 变量配合 */
+
+.tech-bg{
+    position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
+}
+.tech-grid{
+    position:absolute;inset:0;
+    background-image:
+        linear-gradient(var(--bg-grid) 1px,transparent 1px),
+        linear-gradient(90deg,var(--bg-grid) 1px,transparent 1px);
+    background-size:32px 32px;
+    mask-image:radial-gradient(ellipse 85% 75% at 50% 35%,#000 20%,transparent 75%);
+}
+.tech-glow{
+    position:absolute;width:70vmax;height:70vmax;
+    top:-25%;left:50%;transform:translateX(-50%);
+    background:radial-gradient(circle,var(--ambient-glow) 0%,transparent 65%);
+    animation:tech-pulse 8s ease-in-out infinite;
+}
+.tech-glow-2{
+    position:absolute;width:50vmax;height:50vmax;
+    bottom:-20%;right:-10%;
+    background:radial-gradient(circle,var(--ambient-glow-2) 0%,transparent 70%);
+    animation:tech-pulse 10s ease-in-out infinite reverse;
+}
+.tech-scanline{
+    position:absolute;inset:0;
+    background:repeating-linear-gradient(
+        0deg,
+        transparent,
+        transparent 2px,
+        var(--scanline) 2px,
+        var(--scanline) 3px
+    );
+    opacity:.35;
+    animation:tech-scan 12s linear infinite;
+}
+@keyframes tech-pulse{
+    0%,100%{opacity:.55;transform:translateX(-50%) scale(1)}
+    50%{opacity:.85;transform:translateX(-50%) scale(1.05)}
+}
+@keyframes tech-scan{
+    0%{transform:translateY(0)}
+    100%{transform:translateY(32px)}
+}
+@keyframes tech-shine{
+    0%,100%{opacity:.45}
+    50%{opacity:.9}
+}
+
+@media (prefers-reduced-motion: reduce){
+    .tech-glow,.tech-glow-2,.tech-scanline,.card::after,.site-header::after{animation:none}
+}
+
+.page-wrap{position:relative;z-index:1}
+
+.site-header{
+    border-bottom:1px solid var(--border-header);
+    background:var(--header-bg);
+    backdrop-filter:blur(12px);
+}
+.site-header::after{
+    content:"";display:block;height:1px;margin-top:-1px;
+    background:linear-gradient(90deg,transparent,var(--accent),var(--accent-2),transparent);
+    opacity:.7;animation:tech-shine 4s ease-in-out infinite;
+}
+.site-title{
+    letter-spacing:.04em;
+    background:linear-gradient(135deg,var(--text-title) 0%,var(--accent) 45%,var(--accent-2) 100%);
+    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
+    background-clip:text;
+    filter:drop-shadow(0 0 24px var(--title-glow));
+}
+.site-title-sub{
+    display:block;font-size:.72rem;font-weight:500;
+    letter-spacing:.22em;text-transform:uppercase;
+    color:var(--text-muted);margin-top:.35rem;
+    -webkit-text-fill-color:var(--text-muted);
+}
+
+.site-nav a{
+    border-radius:999px;
+    letter-spacing:.02em;
+    position:relative;overflow:hidden;
+    transition:transform .2s,box-shadow .2s,border-color .2s,background .2s;
+}
+.site-nav a::before{
+    content:"";position:absolute;inset:0;
+    background:linear-gradient(120deg,transparent,rgba(255,255,255,.06),transparent);
+    opacity:0;transition:opacity .25s;
+}
+.site-nav a:hover::before{opacity:1}
+.site-nav a:hover{
+    transform:translateY(-1px);
+    box-shadow:0 4px 20px var(--nav-hover-glow);
+}
+.site-nav a.active{
+    background:linear-gradient(135deg,var(--nav-active),var(--accent-2));
+    border-color:transparent;
+    box-shadow:0 0 20px var(--nav-active-glow),inset 0 1px 0 rgba(255,255,255,.15);
+}
+
+.theme-toggle{
+    border-radius:999px;
+    transition:box-shadow .2s,border-color .2s;
+}
+.theme-toggle:hover{
+    box-shadow:0 0 16px var(--nav-hover-glow);
+}
+
+.card{
+    border-radius:14px;
+    transition:transform .25s,box-shadow .25s,border-color .25s;
+}
+.card:hover{
+    transform:translateY(-2px);
+    border-color:var(--card-border-hover);
+    box-shadow:var(--shadow-card-hover);
+}
+.card::after{
+    animation:tech-shine 5s ease-in-out infinite;
+}
+.card-corner{
+    width:16px;height:16px;opacity:.55;
+    transition:opacity .25s,box-shadow .25s;
+}
+.card:hover .card-corner{opacity:.9;box-shadow:0 0 8px var(--accent)}
+.card-corner.tr{top:10px;right:10px;border-top:2px solid;border-right:2px solid}
+.card-corner.bl{bottom:10px;left:10px;border-bottom:2px solid;border-left:2px solid}
+.card h2{letter-spacing:.03em}
+.card h2:before{
+    box-shadow:0 0 12px var(--accent),0 0 4px var(--accent-2);
+}
+
+input:focus,select:focus,textarea:focus{
+    box-shadow:0 0 0 3px var(--focus-ring),0 0 16px var(--focus-glow);
+}
+button.btn-primary{
+    font-weight:600;letter-spacing:.04em;
+    box-shadow:0 4px 20px var(--btn-glow);
+    transition:transform .15s,box-shadow .2s,opacity .2s;
+}
+button.btn-primary:hover{
+    transform:translateY(-1px);
+    box-shadow:0 6px 28px var(--btn-glow-strong);
+    opacity:1;
+}
+
+.list-item{
+    transition:border-color .2s,box-shadow .2s,transform .2s;
+}
+.list-item:hover{
+    border-color:var(--card-border-hover);
+    box-shadow:0 4px 16px var(--card-glow);
+}
+table tbody tr{transition:background .15s}
+table tbody tr:hover{background:var(--row-hover)}
+
+.stat-item{
+    backdrop-filter:blur(8px);
+    transition:transform .2s,box-shadow .2s;
+}
+.stat-item:hover{
+    transform:translateY(-2px);
+    box-shadow:0 8px 24px var(--card-glow);
+}
+.stat-item .value{
+    font-variant-numeric:tabular-nums;
+    letter-spacing:.02em;
+}
+
+.pos-card{
+    position:relative;overflow:hidden;
+    transition:border-color .2s,box-shadow .2s;
+}
+.pos-card::before{
+    content:"";position:absolute;top:0;left:0;right:0;height:2px;
+    background:linear-gradient(90deg,var(--accent),var(--accent-2));
+    opacity:.5;
+}
+.pos-card:hover{
+    border-color:var(--card-border-hover);
+    box-shadow:0 6px 24px var(--card-glow);
+}
+
+.badge{letter-spacing:.02em;border:1px solid transparent}
+.badge.dir{border-color:rgba(76,194,255,.25)}
+.badge.profit{border-color:rgba(76,217,127,.3)}
+.badge.loss{border-color:rgba(255,102,102,.3)}
+
+.modal-box{
+    border:1px solid var(--card-border-hover);
+    box-shadow:var(--shadow-card-hover),0 0 60px var(--card-glow);
+}
+
+.flash{
+    box-shadow:0 0 24px var(--focus-glow);
+    letter-spacing:.02em;
+}
+
+.profile-spec{
+    border:1px solid var(--card-border-hover);
+    box-shadow:inset 0 0 40px var(--card-glow);
+}
+
+.key-live .live-price-line,.live-price{
+    text-shadow:0 0 12px var(--focus-glow);
+}
+
+.preset-tabs a.active{
+    box-shadow:0 0 12px var(--focus-glow);
+}

templates/base.html

@@ -7,67 +7,94 @@
     <script src="{{ url_for('static', filename='js/theme.js') }}"></script>
     <style>
         :root,[data-theme="dark"]{
-            --bg-page:#07070d;
+            --bg-page:#050508;
-            --bg-grid:rgba(76,194,255,.035);
+            --bg-grid:rgba(76,194,255,.045);
-            --border-header:#1a1a28;
+            --border-header:rgba(76,194,255,.12);
-            --text-primary:#eaeaea;
+            --header-bg:rgba(8,10,18,.75);
+            --text-primary:#e8eaf6;
             --text-title:#ffffff;
-            --text-muted:#8a8a9e;
+            --text-muted:#7a82a0;
-            --text-label:#b4b4e8;
+            --text-label:#a8b4ff;
             --accent:#4cc2ff;
-            --accent-2:#7b42ff;
+            --accent-2:#9d6bff;
-            --card-bg:rgba(14,14,22,.88);
+            --ambient-glow:rgba(76,194,255,.14);
-            --card-border:rgba(76,194,255,.18);
+            --ambient-glow-2:rgba(123,66,255,.1);
-            --card-glow:rgba(76,194,255,.07);
+            --scanline:rgba(76,194,255,.03);
-            --card-inner:#161625;
+            --title-glow:rgba(76,194,255,.35);
-            --input-bg:#1a1a29;
+            --card-bg:rgba(10,12,22,.82);
-            --input-border:#2e2e45;
+            --card-border:rgba(76,194,255,.22);
-            --nav-bg:#161625;
+            --card-border-hover:rgba(76,194,255,.45);
-            --nav-border:#2a2a40;
+            --card-glow:rgba(76,194,255,.12);
-            --nav-hover:#1e2533;
+            --card-inner:rgba(16,20,36,.9);
-            --nav-active:#2d5aa8;
+            --input-bg:rgba(12,14,26,.95);
-            --nav-active-border:#3d6ec4;
+            --input-border:rgba(76,194,255,.18);
-            --list-item-bg:rgba(22,22,37,.75);
+            --nav-bg:rgba(14,16,28,.9);
-            --table-border:#242435;
+            --nav-border:rgba(76,194,255,.15);
+            --nav-hover:rgba(30,40,68,.85);
+            --nav-hover-glow:rgba(76,194,255,.15);
+            --nav-active:#2563eb;
+            --nav-active-border:transparent;
+            --nav-active-glow:rgba(76,194,255,.45);
+            --focus-ring:rgba(76,194,255,.25);
+            --focus-glow:rgba(76,194,255,.2);
+            --btn-glow:rgba(76,194,255,.35);
+            --btn-glow-strong:rgba(123,66,255,.4);
+            --row-hover:rgba(76,194,255,.06);
+            --list-item-bg:rgba(14,18,32,.8);
+            --table-border:rgba(76,194,255,.1);
             --profit:#4cd97f;
-            --profit-bg:#1e332f;
+            --profit-bg:rgba(76,217,127,.12);
-            --loss:#ff6666;
+            --loss:#ff6b7a;
-            --loss-bg:#331e24;
+            --loss-bg:rgba(255,107,122,.12);
-            --dir-bg:#1e2533;
+            --dir-bg:rgba(30,45,80,.6);
-            --planned-bg:#29241e;
+            --planned-bg:rgba(234,193,71,.12);
             --planned-text:#eac147;
-            --expired-bg:#2a2a35;
+            --expired-bg:rgba(40,44,60,.8);
-            --expired-text:#999;
+            --expired-text:#8a8a9e;
-            --flash-bg:#1e2533;
+            --flash-bg:rgba(30,45,80,.7);
             --flash-text:#4cc2ff;
-            --modal-mask:rgba(0,0,0,.72);
+            --modal-mask:rgba(2,4,12,.82);
-            --danger:#ff6666;
+            --danger:#ff6b7a;
-            --shadow-card:0 8px 32px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.05);
+            --shadow-card:0 8px 32px rgba(0,0,0,.45),0 0 1px rgba(76,194,255,.3),inset 0 1px 0 rgba(255,255,255,.04);
-            --calc-bg:#151520;
+            --shadow-card-hover:0 16px 48px rgba(0,0,0,.5),0 0 24px var(--card-glow);
-            --toggle-bg:#161625;
+            --calc-bg:rgba(20,24,42,.9);
-            --toggle-border:#2a2a40;
+            --toggle-bg:rgba(14,16,28,.9);
+            --toggle-border:rgba(76,194,255,.2);
         }
         [data-theme="light"]{
-            --bg-page:#eef2f7;
+            --bg-page:#e8eef8;
-            --bg-grid:rgba(37,99,235,.05);
+            --bg-grid:rgba(37,99,235,.07);
-            --border-header:#d1dae6;
+            --border-header:rgba(37,99,235,.15);
+            --header-bg:rgba(255,255,255,.82);
             --text-primary:#1a2233;
-            --text-title:#0f172a;
+            --text-title:#0a1628;
             --text-muted:#5c6578;
             --text-label:#1d4ed8;
             --accent:#2563eb;
-            --accent-2:#6366f1;
+            --accent-2:#7c3aed;
-            --card-bg:rgba(255,255,255,.94);
+            --ambient-glow:rgba(37,99,235,.12);
-            --card-border:rgba(37,99,235,.22);
+            --ambient-glow-2:rgba(124,58,237,.08);
-            --card-glow:rgba(37,99,235,.06);
+            --scanline:rgba(37,99,235,.04);
-            --card-inner:#f1f5f9;
+            --title-glow:rgba(37,99,235,.2);
+            --card-bg:rgba(255,255,255,.92);
+            --card-border:rgba(37,99,235,.2);
+            --card-border-hover:rgba(37,99,235,.4);
+            --card-glow:rgba(37,99,235,.1);
+            --card-inner:#f4f7fc;
             --input-bg:#ffffff;
             --input-border:#b8c5d6;
-            --nav-bg:#ffffff;
+            --nav-bg:rgba(255,255,255,.95);
-            --nav-border:#c5d0dc;
+            --nav-border:rgba(37,99,235,.18);
-            --nav-hover:#eef2f7;
+            --nav-hover:#eef4ff;
+            --nav-hover-glow:rgba(37,99,235,.12);
             --nav-active:#2563eb;
-            --nav-active-border:#2563eb;
+            --nav-active-border:transparent;
+            --nav-active-glow:rgba(37,99,235,.35);
+            --focus-ring:rgba(37,99,235,.2);
+            --focus-glow:rgba(37,99,235,.15);
+            --btn-glow:rgba(37,99,235,.25);
+            --btn-glow-strong:rgba(37,99,235,.35);
+            --row-hover:rgba(37,99,235,.05);
             --list-item-bg:#f1f5f9;
             --table-border:#e2e8f0;
             --profit:#15803d;
@@ -83,20 +110,16 @@
             --flash-text:#1d4ed8;
             --modal-mask:rgba(15,23,42,.45);
             --danger:#dc2626;
-            --shadow-card:0 8px 28px rgba(15,23,42,.08),inset 0 1px 0 rgba(255,255,255,.95);
+            --shadow-card:0 8px 28px rgba(15,23,42,.08),0 0 1px rgba(37,99,235,.15),inset 0 1px 0 rgba(255,255,255,.95);
+            --shadow-card-hover:0 16px 40px rgba(15,23,42,.12),0 0 20px var(--card-glow);
             --calc-bg:#eef2ff;
             --toggle-bg:#ffffff;
             --toggle-border:#c5d0dc;
         }
         *{margin:0;padding:0;box-sizing:border-box}
         body{
-            font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
+            font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
             background:var(--bg-page);
-            background-image:
-                radial-gradient(ellipse 80% 50% at 50% -20%,var(--card-glow),transparent),
-                linear-gradient(var(--bg-grid) 1px,transparent 1px),
-                linear-gradient(90deg,var(--bg-grid) 1px,transparent 1px);
-            background-size:100% 100%,28px 28px,28px 28px;
             color:var(--text-primary);
             min-height:100vh;
             transition:background .25s,color .25s;
@@ -165,6 +188,8 @@
             border-color:var(--accent);opacity:.35;
         }
         .card-corner.tl{top:10px;left:10px;border-top:2px solid;border-left:2px solid}
+        .card-corner.tr{top:10px;right:10px;border-top:2px solid;border-right:2px solid}
+        .card-corner.bl{bottom:10px;left:10px;border-bottom:2px solid;border-left:2px solid}
         .card-corner.br{bottom:10px;right:10px;border-bottom:2px solid;border-right:2px solid}
         .card > *{position:relative;z-index:1}
         .card h2{
@@ -394,9 +419,16 @@
             .site-nav a{padding:.45rem .75rem;font-size:.82rem}
         }
     </style>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/tech.css') }}">
     {% block extra_css %}{% endblock %}
 </head>
 <body>
+    <div class="tech-bg" aria-hidden="true">
+        <div class="tech-grid"></div>
+        <div class="tech-glow"></div>
+        <div class="tech-glow-2"></div>
+        <div class="tech-scanline"></div>
+    </div>
     <div class="page-wrap">
         <header class="site-header">
             <div class="header-tools">
@@ -406,7 +438,7 @@
                 </button>
             </div>
             <div class="user-bar">{{ session.username or '用户' }}<a href="{{ url_for('logout') }}">退出</a></div>
-            <h1 class="site-title">国内期货 | 交易监控 + 复盘一体化</h1>
+            <h1 class="site-title">国内期货 · 交易监控 + 复盘<span class="site-title-sub">FUTURES MONITOR SYSTEM</span></h1>
             <nav class="site-nav">
                 <a href="{{ url_for('plans') }}" class="{% if request.endpoint == 'plans' %}active{% endif %}">开单计划</a>
                 <a href="{{ url_for('keys') }}" class="{% if request.endpoint == 'keys' %}active{% endif %}">关键位监控</a>
@@ -424,6 +456,16 @@
         </main>
     </div>
     <script src="{{ url_for('static', filename='js/symbol.js') }}"></script>
+    <script>
+    document.addEventListener('DOMContentLoaded', function () {
+        document.querySelectorAll('.card').forEach(function (card) {
+            if (card.querySelector('.card-corner')) return;
+            var html = '<span class="card-corner tl"></span><span class="card-corner tr"></span>' +
+                '<span class="card-corner bl"></span><span class="card-corner br"></span>';
+            card.insertAdjacentHTML('afterbegin', html);
+        });
+    });
+    </script>
     {% block extra_js %}{% endblock %}
 </body>
 </html>

templates/login.html

@@ -7,96 +7,160 @@
     <script src="{{ url_for('static', filename='js/theme.js') }}"></script>
     <style>
         :root,[data-theme="dark"]{
-            --bg-page:#07070d;
+            --bg-page:#050508;
-            --card-bg:rgba(14,14,22,.92);
+            --bg-grid:rgba(76,194,255,.045);
-            --card-border:rgba(76,194,255,.18);
+            --card-bg:rgba(10,12,22,.88);
-            --text-primary:#eaeaea;
+            --card-border:rgba(76,194,255,.25);
-            --text-label:#b4b4e8;
+            --card-border-hover:rgba(76,194,255,.45);
+            --card-glow:rgba(76,194,255,.12);
+            --ambient-glow:rgba(76,194,255,.14);
+            --ambient-glow-2:rgba(123,66,255,.1);
+            --scanline:rgba(76,194,255,.03);
+            --text-primary:#e8eaf6;
+            --text-label:#a8b4ff;
+            --text-muted:#7a82a0;
             --accent:#4cc2ff;
-            --accent-2:#7b42ff;
+            --accent-2:#9d6bff;
-            --input-bg:#1a1a29;
+            --input-bg:rgba(12,14,26,.95);
-            --input-border:#2e2e45;
+            --input-border:rgba(76,194,255,.2);
-            --loss-bg:#331e24;
+            --focus-ring:rgba(76,194,255,.25);
-            --loss:#ff6666;
+            --focus-glow:rgba(76,194,255,.2);
-            --shadow:0 12px 40px rgba(0,0,0,.4);
+            --btn-glow:rgba(76,194,255,.35);
-            --toggle-bg:#161625;
+            --btn-glow-strong:rgba(123,66,255,.4);
-            --toggle-border:#2a2a40;
+            --loss-bg:rgba(255,107,122,.12);
+            --loss:#ff6b7a;
+            --shadow:0 16px 48px rgba(0,0,0,.5),0 0 24px var(--card-glow);
+            --toggle-bg:rgba(14,16,28,.9);
+            --toggle-border:rgba(76,194,255,.2);
+            --nav-hover-glow:rgba(76,194,255,.15);
         }
         [data-theme="light"]{
-            --bg-page:#eef2f7;
+            --bg-page:#e8eef8;
-            --card-bg:rgba(255,255,255,.96);
+            --bg-grid:rgba(37,99,235,.07);
+            --card-bg:rgba(255,255,255,.94);
             --card-border:rgba(37,99,235,.22);
+            --card-border-hover:rgba(37,99,235,.4);
+            --card-glow:rgba(37,99,235,.1);
+            --ambient-glow:rgba(37,99,235,.12);
+            --ambient-glow-2:rgba(124,58,237,.08);
+            --scanline:rgba(37,99,235,.04);
             --text-primary:#1a2233;
             --text-label:#1d4ed8;
+            --text-muted:#5c6578;
             --accent:#2563eb;
-            --accent-2:#6366f1;
+            --accent-2:#7c3aed;
             --input-bg:#ffffff;
             --input-border:#b8c5d6;
+            --focus-ring:rgba(37,99,235,.2);
+            --focus-glow:rgba(37,99,235,.15);
+            --btn-glow:rgba(37,99,235,.25);
+            --btn-glow-strong:rgba(37,99,235,.35);
             --loss-bg:#fee2e2;
             --loss:#dc2626;
-            --shadow:0 12px 32px rgba(15,23,42,.1);
+            --shadow:0 16px 40px rgba(15,23,42,.12),0 0 20px var(--card-glow);
             --toggle-bg:#ffffff;
             --toggle-border:#c5d0dc;
+            --nav-hover-glow:rgba(37,99,235,.12);
         }
         *{margin:0;padding:0;box-sizing:border-box}
         body{
             background:var(--bg-page);
-            font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
+            font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
             display:flex;align-items:center;justify-content:center;
             min-height:100vh;color:var(--text-primary);
             padding:1rem;
         }
-        .login-wrap{width:100%;max-width:400px}
+        .login-wrap{width:100%;max-width:400px;position:relative;z-index:1}
         .theme-row{display:flex;justify-content:flex-end;margin-bottom:.75rem}
         .theme-toggle{
-            padding:.4rem .75rem;border-radius:8px;
+            padding:.4rem .75rem;border-radius:999px;
             border:1px solid var(--toggle-border);
             background:var(--toggle-bg);color:var(--text-primary);
             font-size:.78rem;cursor:pointer;
+            transition:box-shadow .2s;
         }
+        .theme-toggle:hover{box-shadow:0 0 16px var(--nav-hover-glow)}
         .theme-toggle .icon-light,.theme-toggle .icon-dark{display:none}
         [data-theme="dark"] .theme-toggle .icon-light{display:inline}
         [data-theme="light"] .theme-toggle .icon-dark{display:inline}
         .login-box{
             background:var(--card-bg);
-            padding:2.5rem;border-radius:16px;
+            padding:2.5rem 2rem 2rem;border-radius:14px;
             border:1px solid var(--card-border);
             box-shadow:var(--shadow);
             position:relative;overflow:hidden;
+            backdrop-filter:blur(12px);
+            transition:border-color .25s,box-shadow .25s;
+        }
+        .login-box:hover{
+            border-color:var(--card-border-hover);
         }
         .login-box::after{
-            content:"";position:absolute;top:0;left:15%;right:15%;height:1px;
+            content:"";position:absolute;top:0;left:12%;right:12%;height:1px;
             background:linear-gradient(90deg,transparent,var(--accent),var(--accent-2),transparent);
-            opacity:.6;
+            opacity:.75;
         }
+        .login-corner{
+            position:absolute;width:16px;height:16px;
+            border-color:var(--accent);opacity:.5;pointer-events:none;
+        }
+        .login-corner.tl{top:12px;left:12px;border-top:2px solid;border-left:2px solid}
+        .login-corner.br{bottom:12px;right:12px;border-bottom:2px solid;border-right:2px solid}
         .login-box h2{
-            margin-bottom:2rem;text-align:center;font-size:1.5rem;
+            margin-bottom:.35rem;text-align:center;font-size:1.45rem;font-weight:700;
-            background:linear-gradient(90deg,var(--accent),var(--accent-2));
+            letter-spacing:.04em;
+            background:linear-gradient(135deg,var(--text-primary),var(--accent),var(--accent-2));
             -webkit-background-clip:text;-webkit-text-fill-color:transparent;
+            filter:drop-shadow(0 0 20px var(--focus-glow));
+        }
+        .login-sub{
+            text-align:center;font-size:.68rem;letter-spacing:.2em;
+            color:var(--text-muted);margin-bottom:2rem;
         }
         .form-group{margin-bottom:1.25rem}
-        .form-group label{display:block;margin-bottom:.5rem;font-size:.9rem;color:var(--text-label)}
+        .form-group label{
+            display:block;margin-bottom:.5rem;font-size:.85rem;
+            color:var(--text-label);letter-spacing:.03em;
+        }
         .form-group input{
             width:100%;padding:.85rem 1rem;border-radius:10px;
             border:1px solid var(--input-border);
             background:var(--input-bg);color:var(--text-primary);
             font-size:.95rem;outline:none;
+            transition:border-color .2s,box-shadow .2s;
         }
-        .form-group input:focus{border-color:var(--accent)}
+        .form-group input:focus{
-        button{
+            border-color:var(--accent);
+            box-shadow:0 0 0 3px var(--focus-ring),0 0 16px var(--focus-glow);
+        }
+        button[type="submit"]{
             width:100%;padding:.9rem;border-radius:10px;border:none;
-            background:linear-gradient(90deg,var(--accent),var(--accent-2));
+            background:linear-gradient(135deg,var(--accent),var(--accent-2));
-            color:#fff;font-size:1rem;font-weight:500;cursor:pointer;
+            color:#fff;font-size:1rem;font-weight:600;cursor:pointer;
+            letter-spacing:.06em;
+            box-shadow:0 4px 24px var(--btn-glow);
+            transition:transform .15s,box-shadow .2s;
+        }
+        button[type="submit"]:hover{
+            transform:translateY(-1px);
+            box-shadow:0 6px 28px var(--btn-glow-strong);
         }
-        button:hover{opacity:.9}
         .flash{
             padding:.8rem;margin-bottom:1rem;
             background:var(--loss-bg);color:var(--loss);
             border-radius:8px;text-align:center;font-size:.85rem;
+            border:1px solid rgba(255,107,122,.25);
         }
     </style>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/tech.css') }}">
 </head>
 <body>
+    <div class="tech-bg" aria-hidden="true">
+        <div class="tech-grid"></div>
+        <div class="tech-glow"></div>
+        <div class="tech-glow-2"></div>
+        <div class="tech-scanline"></div>
+    </div>
     <div class="login-wrap">
         <div class="theme-row">
             <button type="button" id="theme-toggle" class="theme-toggle" aria-label="切换主题">
@@ -105,7 +169,10 @@
             </button>
         </div>
         <div class="login-box">
+            <span class="login-corner tl"></span>
+            <span class="login-corner br"></span>
             <h2>期货监控系统</h2>
+            <p class="login-sub">FUTURES MONITOR</p>
             {% with messages = get_flashed_messages() %}
                 {% if messages %}<div class="flash">{{ messages[0] }}</div>{% endif %}
             {% endwith %}
@@ -118,7 +185,7 @@
                     <label>密码</label>
                     <input type="password" name="password" required placeholder="请输入密码">
                 </div>
-                <button type="submit">登录</button>
+                <button type="submit">登录系统</button>
             </form>
         </div>
     </div>