.tool-timer{
            --bg-primary: #f2f2f7;
            --bg-secondary: #ffffff;
            --surface: #ffffff;
            --text-primary: #000000;
            --text-secondary: #6e6e73;
            --accent: #007aff;
            --accent-secondary: #34c759;
            --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
            --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
            --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.2);
            --border: #e5e5ea;
            --radius-sm: 10px;
            --radius-md: 16px;
            --radius-lg: 20px;
        }
.tool-timer *{ margin: 0; padding: 0; box-sizing: border-box; }
.tool-timer{
            font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background: var(--bg-primary);
            color: var(--text-primary);
            min-height: 100vh;
            padding: 20px 16px;
            line-height: 1.4;
        }
.tool-timer .container{ max-width: 480px; margin: 0 auto; }
.tool-timer header{
            display: flex; justify-content: space-between; align-items: center;
            margin-bottom: 32px; padding-top: env(safe-area-inset-top);
        }
.tool-timer h1{ 
            font-size: 28px; font-weight: 600; 
            letter-spacing: -0.5px; 
        }
.tool-timer .tips-button{
            display: flex; align-items: center; gap: 6px; padding: 8px 16px;
            font-size: 15px; font-weight: 500; background: var(--accent);
            color: #ffffff; border: none; border-radius: var(--radius-sm);
            box-shadow: var(--shadow-sm); cursor: pointer; transition: all 0.2s;
        }
.tool-timer .tips-button:hover{ background: #0056cc; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.tool-timer .tips-button:active{ transform: translateY(0); }
.tool-timer .card{ 
            background: var(--surface); 
            border-radius: var(--radius-lg); 
            padding: 24px; 
            box-shadow: var(--shadow-md); 
            margin-bottom: 24px; 
        }
.tool-timer .countdown-box{ 
            background: var(--surface); 
            border-radius: var(--radius-md); 
            padding: 28px 20px; 
            text-align: center; 
            margin-bottom: 24px; 
            box-shadow: var(--shadow-sm); 
            border: 1px solid var(--border);
        }
.tool-timer .event-title{ 
            font-size: 20px; font-weight: 500; 
            margin-bottom: 8px; color: var(--text-primary); 
        }
.tool-timer .time{ 
            font-size: 56px; font-weight: 300; 
            letter-spacing: -1px; color: var(--text-primary); 
        }
.tool-timer .shared-info{
            background: #fff5e6; color: #8e6d3b; padding: 16px; border-radius: var(--radius-md);
            text-align: center; font-size: 15px; line-height: 1.4; margin-bottom: 20px;
            border: 1px solid #ffd4a3; display: none;
        }
.tool-timer .shared-info a{ color: var(--accent); font-weight: 500; text-decoration: underline; }
.tool-timer label{ 
            display: block; margin: 20px 0 8px; 
            font-weight: 500; font-size: 15px; color: var(--text-secondary); 
            text-transform: uppercase; letter-spacing: 0.5px;
        }
.tool-timer input{ 
            width: 100%; padding: 12px 16px; 
            border: 1px solid var(--border); 
            border-radius: var(--radius-sm); 
            font-size: 17px; 
            transition: all 0.2s; 
            background: var(--surface);
        }
.tool-timer input:focus{ 
            outline: none; border-color: var(--accent); 
            box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1); 
        }
.tool-timer .quick-buttons{ 
            display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; 
            margin: 24px 0; 
        }
.tool-timer .quick-btn{ 
            padding: 14px; background: var(--bg-secondary); 
            border: 1px solid var(--border); 
            border-radius: var(--radius-sm); 
            font-weight: 500; font-size: 15px; 
            cursor: pointer; transition: all 0.2s; 
        }
.tool-timer .quick-btn:hover{ 
            background: var(--accent); color: #ffffff; 
            border-color: var(--accent); transform: translateY(-1px); 
        }
.tool-timer .main-buttons{ 
            display: grid; grid-template-columns: 1fr 1fr; gap: 12px; 
            margin-top: 10px; 
        }
.tool-timer .btn{ 
            padding: 16px; border: none; 
            border-radius: var(--radius-sm); 
            font-size: 17px; font-weight: 500; 
            cursor: pointer; transition: all 0.2s; 
        }
.tool-timer .btn-primary{ 
            background: var(--accent); color: #ffffff; 
        }
.tool-timer .btn-primary:hover{ background: #0056cc; transform: translateY(-1px); }
.tool-timer .btn-danger{ 
            background: var(--bg-secondary); color: var(--text-secondary); 
            border: 1px solid var(--border); 
        }
.tool-timer .btn-danger:hover{ background: #e5e5ea; }
.tool-timer .share-box{ 
            background: var(--bg-secondary); 
            border-radius: var(--radius-md); 
            padding: 20px; margin-top: 24px; 
            text-align: center; border: 1px dashed var(--border); 
            display: none; 
        }
.tool-timer .share-link{ 
            background: var(--surface); 
            padding: 12px; border-radius: var(--radius-sm); 
            font-size: 14px; word-break: break-all; 
            margin: 12px 0; border: 1px solid var(--border); 
        }
.tool-timer .social-btn{ 
            display: inline-block; padding: 10px 18px; 
            margin: 6px; border-radius: var(--radius-sm); 
            color: #ffffff; text-decoration: none; font-weight: 500; 
            font-size: 15px; transition: all 0.2s;
        }
.tool-timer .fb{ background: #1877f2; }
.tool-timer .mail{ background: #007aff; }
.tool-timer .copy{ background: #8e8e93; }
.tool-timer .social-btn:hover{ opacity: 0.9; transform: translateY(-1px); }
.tool-timer .stop-alarm{ 
            background: var(--surface) !important; 
            color: #ff3b30 !important; 
            font-weight: 500; margin-top: 16px; 
            border: 1px solid #ff3b30; 
        }
.tool-timer .app-hint{
            background: var(--surface); 
            border-radius: var(--radius-lg); 
            padding: 20px; 
            text-align: center; 
            font-size: 15px; 
            margin: 30px 0; 
            box-shadow: var(--shadow-sm);
        }
.tool-timer .app-hint strong{ 
            font-size: 17px; display: block; 
            margin-bottom: 12px; font-weight: 500; 
        }
.tool-timer .app-steps{
            display: flex; justify-content: center; gap: 24px; 
            margin-top: 16px; flex-wrap: wrap;
        }
.tool-timer .app-step{
            background: var(--bg-secondary); 
            padding: 12px 16px; 
            border-radius: var(--radius-sm); 
            min-width: 120px; 
            border: 1px solid var(--border);
        }
.tool-timer .app-step span{ 
            font-size: 24px; display: block; 
            margin-bottom: 4px; font-weight: 600; 
        }
.tool-timer footer{ 
            text-align: center; 
            color: var(--text-secondary); 
            margin-top: 50px; 
            font-size: 14px; 
        }
.tool-timer footer a{ 
            color: var(--accent); 
            text-decoration: none; font-weight: 500; 
        }
@media (max-width: 480px) {.tool-timer{ padding: 16px; }
.tool-timer header{ flex-direction: column; gap: 12px; text-align: center; }
.tool-timer h1{ font-size: 24px; }
.tool-timer .time{ font-size: 48px; }
.tool-timer .quick-buttons{ grid-template-columns: repeat(2, 1fr); }
.tool-timer .app-steps{ gap: 16px; }
.tool-timer .app-step{ min-width: 100px; }}